Canvas基础知识详解

• 标签

–

• 不支持canva 的浏览器可以看到的内容

–

• 绘制环境

– getContext("2d"); 目前支持2d的场景

• 绘制矩形

– rect(L,T,W,H):创建一个矩形

– fillRect(L,T,W,H):绘制填充的矩形

– strokeRect(L,T,W,H)绘制矩形(无填充)

• 默认一像素黑色边框

• 设置绘图

– fillStyle:填充颜色(绘制canvas是有顺序的)

– lineWidth:线宽度，笔迹粗细

– strokeStyle:边线颜色

• 绘制路径

• beginPath()

• closePath()

• moveTo()

• lineTo()

– stroke：绘制，划线(黑色默认)

– fill:填充(黑色默认)

– rect(矩形区域)

– clearRect擦除一个矩形区域

– save进入到XXX（）状态

– restore退出xxx（）状态

• 绘制圆形

– arc(x,y,半径,起始弧度,结束弧度,旋转方向)

– x，y起始位置

– 弧度与角度：弧度=角度 x π / 180

– 旋转方向：顺时针（默认：false），逆时针（true）

– 例子钟表

• 绘制字体

• font：设置字体大小

• fillText：填充字体

• strokeText：绘制字体

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！