简单初步:
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为擦子高度