canvas学习笔记（canvas画不出图）

一、刚开始接触canvas的时候使用的是JQuery而不是JavaScript，出现了画不出来图：

1：使用JavaScript

var cas=document.getElementById('canvas').getContext('2d');//这个是使用JavaScript的方法，这个没有问题。

2：使用JQuery

function drawLine(){
		var ctx = $("#canven").getContext("2d");
		//画线条的颜色
		ctx.strokeStyle = "#00BBEE";
		ctx.moveTo(10,10);
		ctx.lineTo(180,80);
		ctx.lineTo(10,80);
		ctx.stroke();
		}

这样是画不出来图的，最后修改为：


function drawLine(){
		var ctx = $("#canven")[0].getContext("2d");
		//画线条的颜色
		ctx.strokeStyle = "#00BBEE";
		ctx.moveTo(10,10);
		ctx.lineTo(180,80);
		ctx.lineTo(10,80);
		ctx.stroke();
		}
这样就可以成功的画出图来了。




原因就是getContext是dom的方法，而不是JQuery对象的一个方法。在使用JQuery获取节点后需要将JQuery对象转换为dom对象。

二、可以画出图之后，开始我们的canvas的学习旅程！

画线条：
function drawLine(){
				var ctx = $("#canven")[0].getContext("2d");
				//画线条的颜色
				ctx.strokeStyle = "#00BBEE";
				ctx.moveTo(10,10);
				ctx.lineTo(180,80);
				ctx.lineTo(10,80);
				ctx.stroke();
			}






画图片
function drawImg(){
				var ctx = $("#image")[0].getContext("2d");
				var img = new Image();
				img.src = "images/bg-01.png";
				//注意：在画图片的时候要保证图片已经加载完成，否则画不出来图片
				img.onload = function(){ctx.drawImage(img,80,20)};
			}









画圆形
function drawCicle(){
				var ctx = $("#cicle")[0].getContext("2d");
				//设置填充色
				ctx.fillStyle = "palegreen";
				//设置透明度
				ctx.globalAlpha = 0.5;
				//开始画
				ctx.beginPath();
				//圆形（X,Y,R,start,end,true/false）
				ctx.arc(50,50,50,0,Math.PI*2,true);
				//结束
				ctx.closePath();
				//自动闭合
				ctx.fill();
			}









画出不同的线条头和尾（lineCap线头的样式数组）
			function drawLineHeader(){
				var ctx = $("#lineHeader")[0].getContext("2d");
				var lineCap = ['butt','round','square'];
				ctx.strokeStyle = "#000000";
				for(var i=0;i<lineCap.length;i++){
					ctx.lineWidth = 15;
					ctx.lineCap = lineCap[i];
					ctx.beginPath();
					ctx.moveTo(25+i*90,20);
					ctx.lineTo(25+i*90,120);
					ctx.stroke();
				}
			}









线条连接处的设置
			function drawLineJoin(){
				var ctx = $("#lineJoin")[0].getContext("2d");
				//连接的样式数组
				var lineJoin = ['round','bevel','miter'];
				//设置线条的宽度宽一些，效果明显
				ctx.lineWidth = 15;
				for(var i=0;i<lineJoin.length;i++){
					ctx.lineJoin = lineJoin[i];
					ctx.beginPath();
					ctx.moveTo(10,60+i*40);
					ctx.lineTo(80,10+i*40);
					ctx.lineTo(150,60+i*40);
					ctx.lineTo(220,10+i*40);
					ctx.lineTo(290,60+i*40);
					ctx.stroke();
				}
			}
			









画虚线（使用定时器可以实现跑马灯效果）
	//画虚线
			var sctx = $("#dotted")[0].getContext("2d");
			var offset = 0;
			function drawDotted(){
				offset++;
				if(offset > 16){
					offset = 0;
				}
				sctx.clearRect(0,0,150,150);
				sctx.setLineDash([6,2]);
				sctx.lineDashOffset = -offset;
				sctx.strokeRect(25,20,50,50);
			}
			setInterval(drawDotted,50);









线性渐变的效果实现
//线性渐变
			function drawShade(){
				var ctx = $("#shade")[0].getContext("2d");
				//线性渐变
				var bg = ctx.createLinearGradient(0,0,100,100);
				bg.addColorStop(0,"black");
				bg.addColorStop(0.6,"#fff");
				ctx.fillStyle = bg;
				ctx.fillRect(0,0,100,100);
			}









径向渐变的效果实现
//径向渐变
			function drawCicleShade(){
				var ctx = $("#cicleShade")[0].getContext("2d");
				var bg = ctx.createRadialGradient(50,50,0,50,50,50);    //createRadialGradient(x1,y1,r1,x2,y2,r2)
				bg.addColorStop(0, '#FF5F98');
			    bg.addColorStop(0.75, '#FF0188');
			    bg.addColorStop(1, 'rgba(255,1,136,0)');
			    ctx.fillStyle = bg;
			    ctx.fillRect(0,0,100,100);
			}









canvas的状态保存和状态恢复
//变形
			function drawTrasformation(){
				var ctx = $("#trasformation")[0].getContext("2d");
				ctx.fillStyle = "black";
				ctx.fillRect(0,0,100,100);
				//保存当前的状态
				ctx.save();
				ctx.fillStyle = "white";
				ctx.fillRect(20,20,60,60);
				//恢复当前的状态
				ctx.restore();
				ctx.fillRect(40,40,20,20);
			}









画布的移动和旋转
//放射状
			function drawRadiate(){
				var ctx = $("#radiate")[0].getContext("2d");
				ctx.translate(75,75);
				for(var i=1;i<6;i++){
					ctx.save();
					ctx.fillStyle = 'rgb('+(50*i)+','+(255-50*i)+',255)';
					for(var j=0;j<i*6;j++){
						ctx.rotate(Math.PI*2/(i*6));
                        ctx.beginPath();
                        ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
                        ctx.fill();
					}
					ctx.restore();
				}
			}