HTML5-canvas小知识

canvas 画布大小

• 标签中设置，不加单位

<canvas id="canvas" width="1024" height="768" ></canvas>

• js中设置

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

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

canvas 浏览器兼容

• html

<canvas>不支持canvas的内容</canvas>

• js

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

canvas 方法

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

canvas画圆

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

canvas closePath（）

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

new image()

• 创建一个Image对象：var a=new Image(); 定义Image对象的src: a.src=”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

透明度

清除画布

这就是两种清除画布的方法

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

translate()

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

清空画布的方法

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

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

2. 使用clearRect方法

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

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

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=”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

透明度