HTML5 CANVAS

简单初步:

1.创建CANVAS画布
2.引入绘画脚本
3.使用draw函数进行绘画

<h3>创建画布</h3>


canvas画布创建

<h3>绘制矩形</h3>

1.获取canvas元素
2.取得上下文
3.填充与绘制边框
4.设置绘制样式
5.指定画笔宽度
6.设置颜色值
7.绘制矩形
canvas绘制方法

canvas绘制样式

设置画笔宽度

设置颜色值
绘制矩形

<h2>绘制图形</h2>

canvas元素本身是没有绘图能力的,必须要在JavaScript下完成
参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D
绘制矩形
绘制矩形

<h2>绘制图片</h2>

绘制图形

<h2>HTML5使用路径</h2>

canvas路径
绘制圆形
filltext
text
text
水平对其方式
保存图片
保存为图片
setInterval

<h3>制作简单动画</h3>
1.使用setInterval设置动画的间隔时间

1.setInterval(code,millisec)
第一个函数表示执行动画的函数,第二个参数表示时间间隔
2.使用擦除图形绘图clearRect方法:
context.fillRect(x,y,width,height);
x为地点横坐标,y为起点纵坐标,width为擦子的长度,height为擦子高度
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容