HTML5Three

canvas:默认的canvas标签大小是300*150默认的颜色是透明,设置宽高必须通过canvas标签的width和height属性设置,而不能使用css进行设置,如果使用css设置,其实画布的大小也会变化,但是他并不是扩大或缩小了画布的范围,而是拉伸了默认的画布,除了宽高以外,其他的可以通过css设置
为了在canvas上进行绘制:我们必须得到一个画布上下文对象的引用,这个对象的参数是2d,如果传入其他参数则返回null
ctx.translate 移动画布坐标
在绘制过程中改变画布的大小那么会把之前所有画过的东西内容给清掉,这个是需要注意的,尽量避免的
ctx.linceCap = round 以线段的边缘中间为圆心,一半的宽度为半径,画了个半圆添加到线上。

清除画布

清除画布使用clearRect方法 4个参数 起始坐标和矩形的宽高

旋转画布

ctx.rotate 是旋转参数是一个弧度 在变形之前不会受到影响,变形之后,后面的画图会受到影响
scale是缩放 必须书写两个参数 一个是x缩放一个是y缩放

存档

save()是存档保存当前画布所有状态,包括变形,画笔等等状态
restore()回复最近的存档
ctx.cleaRect(0,0,canvas,widht,canvas,height)

你可能感兴趣的:(HTML5Three)