canvas

  • A+
所属分类:web教程
标签
<canvas>
不支持canvas的浏览器可以看到的内容
</canvas>
绘制环境
getContext('2d'): 目前支持2d的场景
绘制方块
fillRect(L,T,W,H) : 默认颜色是黑色
strokeRect(L,T,W,H): 带边框的方块
设置绘图
fillStyle: 填充颜色(绘制canvas是有顺序的)
linewidth: 线宽度, 是一个数值
strokeStyle: 边线颜色
边界绘制
lineJoin : 边界连接点样式
miter(默认)、round(圆角)、bevel(斜角)
lineCap:设置或返回线条末端线帽的样式
butt(默认)、round(圆角)、square(高度多出为宽一半的值)
绘制路径
beginPath: 开始绘制路径
closePath: 结束绘制路径
moveTo : 移动到绘制的新目标点
lineTo : 新的目标点
绘制路径_2
stroke: 画线, 默认黑色
fill : 填充, 默认黑色
rect : 矩形区域
clearRect : 删除一个画布的矩形区域
save : 保存路径
restore: 恢复路径
小例子: 方块移动
绘制圆
arc(x, y, 半径, 起始弧度, 结束弧度, 旋转方向)
x, y:圆心位置
弧度与角度的关系: 弧度 = 角度*Math.PI/180
旋转方向: 顺时针(默认: false)、逆时针(true)
绘制其他曲线
通过moveTo设置起点
arcTo(x1, y1, x2,y2,r)
第一组坐标、第二组坐标、半径
quadraticCurveTo(dx, dy, x1, y1)
二次贝塞尔曲线: 第一组控制点、第二组结束点
bezierCurveTo(dx1, dy1, dx2, dy2, x1, y1)
三次贝塞尔曲线: 第一组控制点、第二组控制点、第三组结束点
变换
translate
偏移: 从起始点为基点, 移动当前坐标位置
rotate
旋转: 参数为弧度
例子: 旋转的小方块
scale
缩放例子: 旋转和缩放的小方块

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: