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;
- 不建议用css设置，css里面设定canvas的宽高并不是真正的大小，而是同比缩放，canvas除了整块画布的大小，还有其内里的分别率大小；
- 当不指定画布宽高时，页面的画布大小为：300px宽150px高；
canvas 浏览器兼容
- html
<canvas>不支持canvas的内容</canvas>
- js
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=”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
透明度
清除画布
这就是两种清除画布的方法
- 直接调用清除方法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=”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
透明度
