HTML5新标签-canvas

HTML5新标签canvas,绘图技术

浏览器兼容兼容问题

IE9以上才支持canvas，目前其他流行浏览器都支持

移动端兼容非常理想可以随便使用

2d的支持的都非常好，3d(webgl)IE11才支持

为避免浏览器不兼容做好进行友好提示，提示内容只会在浏览器不支持情况下才显示

<canvas id="cavsElem">
	您当前的浏览器不支持canvas，请升级浏览器后再访问
</canvas>

创建画布

在页面中创建canvas与其他元素一样，只需要添加一个标记即可，该元素默认狂高为300*150，不可以通过css样式进行改变，只能在行内书写改变其宽高

绘制路线

我们作画不可能只画一条直线，所以在此我先说一个把各各路线或者区域隔开的方法，使之不会相互影响

我们作画肯定需要画笔把，在浏览器上也一样

第一步获取画布，获得画笔

var ele_canvas=document.querySelector('canvas');
var myCan=ele_canvas.getContext('2d');

第二步直接区分每块区域

//创建区域
myCan.beginPath();
//关闭当前区域
myCan.closePath();

第三步在closePath();之前开始作画

路径的起点终点，闭合（路线会自己闭合）

//创建区域
myCan.beginPath();
myCan.moveTo(x,y);//起点，x,y为坐标，提示原点为左上角
myCan.lineTo(x,y);//终点

//关闭当前区域
myCan.closePath();
//闭合路径
myCan.stroke();

我们都可以画线条了那我们的画笔当然也可以换颜色和粗细了，

在绘画之前，beginPath()之后可以用来定义不同区域的线条颜色，线条粗细，和填充颜色

//定义线条颜色
myCan.strokeStyle='red';
//定义线条粗细
myCan.lineWidth=4;//值不可以带单位，且要大于0
//填充颜色
myCan.fillStyle="springgreen";
//调用填充
myCan.fill();//需要手动调用一下

快速绘制矩形rect()方法

myCan.rect(x,y,width,height);
//	坐标原点（也就是矩形的左上角）、宽、高

清除矩形

myCan.clearRect(x,y,width,height);
//被清除后会变成白色，但是如果多个部分叠加那另说

快速建立描边矩形：

myCan.strokeRect(x,y,width,height);

快速建立秒填充矩形

myCan.fillRect(x,y,width,height);

绘制圆弧 arc()用于创建圆或部分圆

语法

myCan.arc(x,y,r,start,end,true/false);
//坐标，半径，开始弧度，结束弧度，是否反向连接
//这里是要用弧度的而不是角度
//弧度等于角度*Math.PI/180;

绘制文本

填充文本：

fillText(text,x,y[,maxWidth]);

myCan.fillText('hello world',10,50);
//maxWidth是最大宽度，是选填项

绘制文本边框

strokeText(text,x,y[,maxWidth]);

文本样式 font=value

myCan.font='700 48px 华文行楷';

文本对齐方式：

//textAlign=value
myCan.textAlign = "left";
myCan.fillText("left-align", 150, 40);
//上一句是用来定义文本的排列方式的
//后者使用来定义文本，在哪里，多少，排列的
//两者组合的意思是文本left-align在x轴150px位置的竖线（文本先居中然后）左边是
//40px的距离

绘制图像

myCan.drawImage(img,x,y);
myCan.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
//sx,sy裁剪的左上角，swidth,sheight要裁剪的宽度和高度

补充需要等待图片加载文笔才可以加载到convas画布里面所以许哟啊有个加载事件

第一种方式：

 var img = document.getElementById("imgId");
	img.onload = function(){  //图片加载完成后，执行此方法
   cxt.drawImage(img, 10, 10);
 }

第二种方式：

var img = document.createElement("img");
    	img.src = "img/a.jpg";
    	img.alt = "谁笑谁是小狗";
    	img.onload = function(){  //图片加载完成后，执行此方法
    		cxt.drawImage(img, 10, 10);
 }

第三种方式：

  var img = new Image();//这个就是 img标签的dom对象
    img.src = "imgs/arc.gif";
    img.alt = "谁笑谁是小狗";
    img.onload = function() {  //图片加载完成后，执行此方法
        cxt.drawImage(img, 10, 10);
    }