文档章节

HTML5之帆布(canvas)(四)

博为峰教研组
 博为峰教研组
发布于 2016/12/12 15:07
字数 373
阅读 1
收藏 0
点赞 0
评论 0

绘制矩形

· 指定正方形的边长

· 指定正方形的位置点¯x和ÿ

· 设置正方形的属性

· 绘制正方形

//画正方形

function drawSquare(canvas,context) {

    var w = Math.floor(Math.random() * 40);

 

    var x = Math.floor(Math.random() * canvas.width);

    var y = Math.floor(Math.random() * canvas.height);

 

    context.fillStyle = "lightblue";

    context.fillRect(x,y,w,w);

}绘制线

· beginPath方法方法告诉画布开始一个新路径

· 的moveTo方法把画笔移到画布上的指定点

· 了lineTo方法描绘路径,从画笔的当前位置描绘到画布上的另一个点

· 调用closePath方法将路径的起始点连接到当前路径的最后一个点

//绘制线

function drawLine(canvas, context) {

    context.beginPath();

    context.moveTo(100, 150);

    context.lineTo(250, 75);

    context.lineTo(125, 30);

    context.closePath();

    context.lineWidth = 5;

    context.stroke();

    context.fillStyle = "red";

    context.fill();

}

绘制圆形

· 创建一个路径

· 填充弧方法参数

· 设置圆的属性

· 填充圆

先来分析弧方法

context.arc(x,y,radius,startAngle,endAngle.direction);

· 点¯x和Y:确定圆心在画布上的位置

· 半径:圆的半径

· 由startAngle:圆弧的起始角,确定路径的起点,可以为负值(表示按负方向度量),单位为弧度

· endAngle:圆弧的终止角,确定路径的终点,可以为负值(表示按负方向度量),单位为弧度

· 方向:真表示逆时针画弧,虚假表示顺时针画弧

//画圆形

function drawCircle(canvas,context) {

 

    var radius = Math.floor(Math.random() * 40);

 

    var x = Math.floor(Math.random() * canvas.width);

    var y = Math.floor(Math.random() * canvas.height);

 

    context.beginPath();

    context.arc(x,y,radius,0,degreeToRadians(360),true);

    context.fillStyle = "red";

    context.fill();

}

 

//度数转弧度

function degreeToRadians(degree) {

    return (degree * Math.PI) / 180;

}

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 49
博文 1224
码字总数 479077
作品 0
黄浦
程序员
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
0
0
给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光
2012/03/09
0
0
HTML5应用——欢乐老虎机

在上面一篇博文中,我介绍了HTML5应用的简易播放器,这篇博文中介绍一个比较复 杂的HTML5游戏-老虎机。 寒假在家玩老虎机输了些许钱,所以自己就萌生了写个老虎机的游戏。开始打算用Visual ...

晨曦之光
2012/02/17
0
3
推荐六款炫酷的HTML5效果插件

1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和HTML5 3D动画...

tower1229
06/26
0
0
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员
04/25
0
0
50个Demo展示HTML5无穷的魅力

Flash和HTML5的比较已经成为现在最热门的主题之一,我们不去争论哪个好哪个不好。和HTML5在很酷的动画和简单的游戏等方面一样,除非HTML5在未来几年有一些重大发展,否则Flash在富内容网页应...

晨曦之光
2012/03/09
0
0
JavaEE——HTML5绘画

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 绘画是HTML5的新功能,以前是没有的,有flash的...

凯哥学堂
2017/10/30
0
0
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日)

Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日) 本周Windows 8开发学习资源更新 本周Silverlight学习资源更新 本周Windows Phone开发学习资源更新 本周WPF学习资源推荐 本周...

冷秋寒
06/29
0
0
Web开发中的矢量绘图(vml,svg)处理和应用

前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 ...

kevin_pang
2014/02/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

自定义OkHttp的UA

背景 上次的问题很明显 由于我们的ua清一色OkHttp导致快速定位到内部应用。 既然如此我们是否考虑可以在UA上做点手脚。 自定义我们的UA呢??? 分析 首先UA在 均为okhttp/3.2.0 大概率是由于...

Mr_Qi
20分钟前
0
0
【scikit-learn】01:使用案例对sklearn库进行简单介绍

sklearn学习笔记:Quick Start 源地址:http://scikit-learn.org/stable/tutorial/basic/tutorial.html # -*-coding:utf-8-*-''' Author:kevinelstri Datetime:2017.2.16'''......

wangxuwei
24分钟前
0
0
Linux Kernel 4.16 系列停止维护,用户应升级至 4.17

知名 Linux 内核维护人员兼开发人员 Greg Kroah-Hartman 近日在发布 4.16.18 版本的同时,宣布这是 4.16 系列的最后一个维护版本,强烈建议用户立即升级至 4.17 系列。 Linux 4.16 于 2018 年...

问题终结者
26分钟前
0
0
Apache配置时.htaccess失效不起作用的原因分析

.htaccess 失效的原因 1. 重写规则有问题,检查自己的重写规则 2.Apache配置问题,配置中没有配置启用 rewrite a2enmod rewrite 3.网站配置文件没有启用配置需要配置 000-default.conf <Dire...

TU-DESGIN
46分钟前
1
0
两个求最大公约数C/C++算法实现

#include<stdio.h> #include<time.h> #include <iostream>using namespace std;//求最大公约数 LCD(Largest Common Division)//短除法 //m=8251, n=6105; int LCD_ShortDiv(int m, ......

失落的艺术
52分钟前
1
0
QueryPerformanceCounter

windows的Sleep函数,睡眠线程指定毫秒数,可以用来做毫秒延时。 对于微秒延时,没有一个现成的函数,但是可以通过 QueryPerformanceFrequency QueryPerformanceCounter 来间接实现。原理就是...

开飞色
今天
1
0
log4j2使用AsyncRoot不显示行号问题处理

<AsyncRoot level="info" includeLocation="true"> <AppenderRef ref="File"/></AsyncRoot><!--1.异步logger,还需要在pom.xml中添加disruptor的依赖。2.includeLocation结合异......

小翔
今天
3
0
安卓手机上 K 歌,声音延迟怎么解决?

这篇文章可以为你提供一个解决录音和播放同步问题的思路,而且解决了声音从手机传输到耳机上有延时的问题。 初识音频 在开始之前,我先简单介绍一下音频相关的基础知识,方便下文理解。 我们...

编辑部的故事
今天
2
0
使用token实现在有效期内APP自动登录功能

使用token实现在有效期内APP自动登录功能 http://sevennight.cc/2016/07/19/auto_login_impl.html

风云海滩
今天
2
0
Spring Boot集成RabbitMQ发送接收JSON

默认情况下RabbitMQ发送的消息是转换为字节码,这里介绍一下如何发送JSON数据。 ObjectMapper 最简单发送JSON数据的方式是把对象使用ObjectMapper等JSON工具类把对象转换为JSON格式,然后发送...

小致dad
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部