H5新特性之canvas

Posted 2020-10-15 张啊咩

 canvas无疑是H5之中最受欢迎的新特性了，它可以让浏览毫无费力的画出各种图案，动画。

canvas最基本的概念是1.路径 2.描边 3.填充

首先先获得canvas的操作借口集（这里先用2d为例）：

let canvas = document.getElementById(‘canvas‘);
// canvas的所有画图接口都集成在gd这里了
let gd = canvas.getContext(‘2d‘);

1.路径

常见的路径操作有

//清除之前的路径
gd.beginPath();

//移动点到x,y
gd.moveTo(x,y);

//线连到x,y
gd.lineTo(x,y);

//矩形“选区”(x,y为左上角的点，w,h分别为宽高)
gd.rect(x,y,w,h);

//圆弧“选区”
gd.arc(x,y,r,startArg,endArg,是否逆时针);

//闭合路径
gd.closePath();

2.描边

常见的描边操作：

// 先设置好描边的样式
gd.strokeStyle = ‘任意CSS颜色‘;
gd.lineWidth = 3; // 边宽3px
// 把上面的路径描一次边
gd.stroke();

//直接描矩形
gd.strokeRect(x,y,w,h);

//写字 
gd.font = ‘30px 宋体‘;
gd.strokeText(‘内容~~‘,x,y);

 

3.填充

常见的填充操作：

//设置填充样式
gd.fillStyle = ‘任意css样式‘；
//把上面的路径自动闭合填充
gd.fill();

//直接填充矩形
gd.fillRect(x,y,w,h);

//填充字体
gd.font = ‘30px 宋体‘;
gd.fillText(‘内容‘,x,y);