HTML5-canvas小知识 HTML5-canvas小知识

canvas 画布大小

标签中设置，不加单位

js中设置

var canvas = document.getElementById('canvs') var context = canvas.getContext('2d')//获得绘图的上下文环境 canvas.width = 1024; //设置canvas大小 canvas.height = 768;

不建议用css设置，css里面设定canvas的宽高并不是真正的大小，而是同比缩放，canvas除了整块画布的大小，还有其内里的分别率大小；
当不指定画布宽高时，页面的画布大小为：300px宽150px高；

canvas 浏览器兼容

html

if(canvas.getContext('2d')){//判断浏览器是否支持canvas //支持 }else{ //不支持 alert(""); }

canvas 方法

canvas.width
canvas.height
canvas.getContext('2d')

canvas画圆

以π为单位，顺时针分别为0pi，0.5pi，1pi，1.5pi ，这是固定的四个点位置，跟距离长短无关，所以不管是顺时针还是逆时针，这几个数的位置是不变的。

canvas closePath（）

与beginPath不用成对出现，用stroke时会自动封闭不是密封的线段

new image()

创建一个Image对象：var a=new Image(); 定义Image对象的src: a.src=https://www.it610.com/article/”xxx.gif”; 这样做就相当于给浏览器缓存了一张图片。
图像对象：

【HTML5-canvas小知识】建立图像对象：图像对象名称=new Image([宽度],[高度])
图像对象的属性： border complete height hspace lowsrc name src vspace width
图像对象的事件：onabort onerror onkeydown onkeypress onkeyup onload

需要注意的是：src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错

var img=new Image(); img.onload=function(){alert("img is loaded")}; img.onerror=function(){alert("error!")}; img.src="http://www.abaonet.com/img.gif"; function show(){alert("body is loaded"); }; window.onload=show;

globalAlpha
透明度
清除画布
这就是两种清除画布的方法

直接调用清除方法clearReact（）
用背景覆盖

translate()

context.translate(x,y)函数可以使画布的原点坐标变为(x,y)，即画笔从这个点开始画。
如果我们希望重新定义画笔的属性，可以用context.save()和context.restore()包裹例如context.translate(),context.fillStyle等属性设定。

清空画布的方法

重设canvas宽高，canvas每当高度或宽度被重设时，画布内容就会被清空

var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); c.height=c.height;

使用clearRect方法

var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.clearRect(0,0,c.width,c.height);

用背景覆盖或者用某一特定颜色填充画布

var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#000000"; cxt.beginPath(); cxt.fillRect(0,0,c.width,c.height); cxt.closePath();

new image()

创建一个Image对象：var a=new Image(); 定义Image对象的src: a.src=https://www.it610.com/article/”xxx.gif”; 这样做就相当于给浏览器缓存了一张图片。
图像对象：

建立图像对象：图像对象名称=new Image([宽度],[高度])
图像对象的属性： border complete height hspace lowsrc name src vspace width
图像对象的事件：onabort onerror onkeydown onkeypress onkeyup onload

需要注意的是：src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错

var img=new Image(); img.onload=function(){alert("img is loaded")}; img.onerror=function(){alert("error!")}; img.src="http://www.abaonet.com/img.gif"; function show(){alert("body is loaded"); }; window.onload=show;

globalAlpha
透明度