HTML5 Canvas简介（一）-CSDN博客

本文链接：https://blog.csdn.net/NIHAOX1/article/details/7662424

页面代码：

<canvas id="myCanvas" style="margin:100px 700px; border:1px solid #666;" onClick="_canvas_click(e)">your browser does not support the canvas tag </canvas>

Canvas的使用解析

1.Canvas页面仅有2个属性 width和height并且为可选项，不过一起放在JS里定义应该也是个不错的选择
PS_1:如不指定width和height 将默认为300*150
PS_2:虽然可以通过 CSS 来调整canvas的大小，但渲染图像会缩放来适应布局的。正确的写法为：

		var _canvas=document.getElementById("myCanvas");
		_canvas.style.backgroundColor="#39f";
		_canvas.height='300';
		_canvas.width='500';

PS_3:虽然fillRect(left,top,width,height)属性也能生成Canvas大小但不友好，将来的标准很可能将不支持该属性

2.Canvas生成后，并不能直接做画必须引用getContext("2d/3d")属性
用法：

		var _canvas=document.getElementById("myCanvas");
		var _CDOM=_canvas.getContext("2d");

PS_1:目前 getContext("2d/3d") 仅支持2d属性。。。 3d属性估计要过2年吧。。。

3.Canvas画笔位置设置：
Canvas的样式都是由JS控制的。。。所以前端展示当然不会有画笔的概念不过Canvas提供了moveTo(x,y)接口
它的作用相当于将画笔放置于画布的某处
PS_1:主要处理好鼠标相对于画布的相对位置

	var _canvas=document.getElementById("myCanvas");
		var _CDOM=_canvas.getContext("2d");
		$("#myCanvas").click(function(e){
		try{
		var _x=parseInt(e.pageX)-parseInt(_canvas.style.marginLeft);
		var _y=parseInt(e.pageY)-parseInt(_canvas.style.marginTop);
		_CDOM.moveTo(_x,_y);
		}catch(e){
			alert(e);	
		}
	});

4.设置直线绘图样式：
先补充一个属性：strokeStyle="#F00"; 同时也支持rgb颜色 strokeStyle="rgb(200,0,0)"; //设置画笔颜色
Canvas支持的直线样式属性有：
_CDOM.lineWidth='5'; //设置线条的宽度
_CDOM.lineCap='butt/round/square'; //设置线条两端的样子
_CDOM.lineJoin='round/bevel/miter'; //设置线条连接位置的样子
_CDOM.lineTo(x,y); //设置线条要移动到的位置
_CDOM.stroke(); //执行操作
用法：

		var _canvas=document.getElementById("myCanvas");
		var _CDOM=_canvas.getContext("2d");
		_CDOM.strokeStyle="#F00";
		_CDOM.lineWidth='5';
		_CDOM.lineCap='round';
		_CDOM.lineJoin='round';
		_CDOM.moveTo(0,0);
		_CDOM.lineTo(100,100);
		_CDOM.lineTo(100,150);
		_CDOM.lineTo(150,100);
		_CDOM.stroke();

5.Canvas阴影：
阴影有关的属性包含有：
shadowOffsetX=2; 设定X轴偏移度支持正负
shadowOffsetY=3; 设定Y轴偏移度支持正负
shadowColor="#666/rgb(100,100,100)" 阴影颜色
shadowBlur=3；设置阴影的模糊程度
具体用法：

	var _canvas=document.getElementById("myCanvas");
	var _CDOM=_canvas.getContext("2d");
	_canvas.style.backgroundColor="#fff";
	_canvas.height='300';
	_canvas.width='500';
	_CDOM.lineWidth='5';
	_CDOM.strokeStyle="#f00";
	_CDOM.shadowOffsetX=-2;
	_CDOM.shadowOffsetY=3;
	_CDOM.shadowColor="#666";
	_CDOM.shadowBlur=10;
	_CDOM.moveTo(0,0);
	_CDOM.lineTo(300,300);
	_CDOM.stroke();

PS_1：使用阴影时，貌似会对画布上的所有对象都会添加阴影。。。所有尽量少用吧必须要使用的话。。。就新建一个画布好了。。用相对定位进行覆盖，不知道能不能解决问题

6.创建线性渐变色
属性：
var _Cgt=_CDOM.createLinearGradient(0,0,300,300) //（起点X,起点Y，终点X，终点Y）主要影响渐变的长度。。起点和终点越远渐变效果淡
_Cgt.addColorStop(1,"#f00"); //addColorStop(offset, color)/*参数：百分比，颜色值*/
_Cgt.addColorStop(0,"#666"); //可设置多重渐变。。。
_Cgt.addColorStop(0,"#39f");
......

_Cgt设置完后添加至描边或者背景中即可
_CDOM.strokeStyle=_Cgt; //_CDOM.fillStyle=_Cgt; 兼容效果有待考察

用法：

	var _canvas=document.getElementById("myCanvas");
		var _CDOM=_canvas.getContext("2d");
		var _Cgt=_CDOM.createLinearGradient(0,0,300,300);
		_Cgt.addColorStop(1,"#f00");
		_Cgt.addColorStop(0,"#666");
		_CDOM.strokeStyle=_Cgt;
		_CDOM.moveTo(0,0);
		_CDOM.lineTo(100,100);
		_CDOM.stroke();