HTML5-canvas1
1、canvas：创建画布
<canvas id="canvas"></canvas>
2、画一条直线
var canvas=document.getElementById('cancas'）;
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//获得2d绘图上下文环境
//画一条直线
context.moveTo(100,100)
context.lineTo(700,700)//状态设置
context.lineWidth=10//指定线条宽度
context.strokeStyle="#fff"//线条颜色
context.stroke() //真正的绘制
//canvas不是基于对象的绘制，是基于状态的绘制环境
2、绘制图形
moveto折现起始的位置
lineto 顶点坐标
若想三根线不同颜色
若分别context.strokeStyle=“ ”
context.stroke(); 最后一次会把前面的覆盖掉
实现：
context.beginPath（）之后会用指定新的状态回值
context.lineWidth=10;
//context.beginPath（） 第一个可以省略
context.moveTo(100,100)开始一个新的坐标点
context.lineTo(700,700)从上个坐标点 画到这个坐标点
context.strokeStyle="red"
context.stroke()
context.beginPath（）开始一端全新的路径
context.moveTo(200,200)
context.lineTo(800,800)
context.strokeStyle="blie"
context.stroke()
绘制封闭图形 有空隙
解决方法：
把图形包在beginPath（）和closePath（）里面
最后一个lineto可以省略 ，会自动连接
颜色填充
context.fillStyle=“yellow”
context.fill();
context.strock();
绘制矩形
3、canvas自带api
context.rect(x,y,width,height);
fillRect()用fillstyle绘制填充矩形
strokeRect() 用 绘制矩形边框
4、后绘制的图形会遮挡前面的图形
原文地址：https://blog.csdn.net/Violetto_Yan/article/details/140571001
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！