标签：lte new 字体 net begin idt 宽高 pat can
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);
标签：lte new 字体 net begin idt 宽高 pat can
原文地址：http://www.cnblogs.com/amiezhang/p/7885669.html
