canvas绘图基础整理

Canvas学习

一、熟悉一下:

window.onload=function(){

var a=document.getElementById("can");

//检测a.getContext()

//alert(a.getContext);

if(a.getContext){

var ctx= a.getContext('2d');

//画布尺寸

ctx.width=400;

ctx.height=400;



//画笔样式

ctx.lineWidth=4;

ctx.strokeStyle="blue";

//填充样式

ctx.fillStyle='pink';



//绘画路径

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(100,100);

//填充路径

ctx.fillRect(0,0,100,100);



ctx.stroke();

ctx.fill();

}

}

其他属性：Linecap

window.onload=function(){

var a=document.getElementById("can");

//检测a.getContext()

//alert(a.getContext);

if(a.getContext){

var ctx= a.getContext('2d');

//画布尺寸

ctx.width=400;

ctx.height=400;



//画笔样式

ctx.lineWidth=20;

ctx.strokeStyle="blue";



//划横线函数，长度为100

function line() {

ctx.strokeStyle=arguments[2];

ctx.lineCap=arguments[1];

ctx.beginPath();

ctx.moveTo(50,arguments[0]);

ctx.lineTo(240,arguments[0]);

ctx.stroke();

}

line(30,'butt','red');//直角

line(60,'round','black');//圆角

line(90,'square','purple');//直角

}

}

二、画矩形strokeRect

//画矩形

function rect(x,y){

ctx.beginPath();

ctx.strokeRect(x,y,100,100);//四个参数,x,y,width,height

ctx.stroke();

}

!function () {

var i=0;

for(;i<10;i++){

rect(3*16*i,5*2);

}

}();

三、画圆arc(x,y,radius(半径),start,end,是否逆时针）

window.onload=function(){

var a=document.getElementById("can");

//检测a.getContext()

//alert(a.getContext);

if(a.getContext){

var ctx= a.getContext('2d');



//画笔样式

ctx.lineWidth=4;

ctx.strokeStyle="blue";



//画圆,六个参数（x,y,radius(半径),start,end,是否逆时针）

function arc(){

ctx.beginPath();

ctx.strokeStyle='red';

ctx.arc(arguments[0],arguments[1],arguments[2],0,90*Math.PI/180,arguments[3]);

ctx.stroke();

};

setTimeout(function(){

ctx.clearRect(0,0,400,400);

(function (){

for(var i=0;i<10;i++){

var a=Math.random()*200;

var b=Math.random()*200;

var c=Math.abs(Math.random()*40);

var d=Math.floor(Math.random()*2);

console.log(d);

arc(a,b,c,d);

}

})();

setTimeout(arguments.callee,100);

},100)

}

}

四、画圆角矩形

五、清除画板clearRect(x,y,width,height)

//清除画板

ctx.arc(100,100,50,0,360*Math.PI/180,true);

ctx.fillStyle='pink';

ctx.fill();

ctx.clearRect(100,100,20,20);

六、贝塞尔曲线

//二次贝尔曲线

ctx.beginPath();

ctx.moveTo(20,20);

ctx.quadraticCurveTo(100,0,200,200);

ctx.stroke();



//三次贝尔曲线

ctx.beginPath();

ctx.moveTo(68,30);

ctx.bezierCurveTo(20,10,200,200,200,100);

ctx.stroke();

七、其他

剪切Cilp（）

//clip()

ctx.arc(100,100,50,0,360*Math.PI/180,true);

ctx.clip();//使用前后的效果对比



ctx.moveTo(100,100);

ctx.lineTo(300,300);



ctx.strokeStyle='red';

ctx.stroke();

八、绘制文字

//绘制文本fillText 与strokeText方法 都是四个参数(文本内容,x,y,maxWidth);

//fillText()方法，需要fillstyle改变样式

var arr=['red','green','purple','black','yellow','#39f'];

function draw(){

ctx.beginPath();

console.log(arguments[2]);

ctx.fillStyle=arguments[2];

ctx.clearRect(0,0,400,400);

ctx.fillText("我爱三妹",arguments[0],arguments[1]);

}

(function(){

setTimeout(function(){

var a=Math.floor(Math.random()*6);

//console.log(arr[a]);

draw(Math.random()*300,Math.random()*200,arr[a]);

setTimeout(arguments.callee,300);

},300);

})();



//strokeText()方法，用strokeStyle改变样式

ctx.beginPath();

ctx.strokeText("我更爱三妹",100,100);





文字的其他样式设置：

//文字的一些设置

ctx.fontWeight='600';//文字粗细

ctx.font="30px";//文字大小

ctx.font='30px Arial';//文字字体;

ctx.font='bold 30px Arial';//文字粗体;

ctx.font='italic bold 30px Arial';//文字斜体;





文字对齐方式：

//文本对齐方式两种textAlign()和textBaseline()

ctx.textAlign='right';

ctx.textBaseline='bottom';

九、图片操作 drawImage() 与 putImageData()

//图片绘制drawImage()方法

ctx.drawImage(img,x,y);//在哪画，尺寸与原图尺寸一样

ctx.drawImage(img,dx,dy,dw,dh);//dw dh是相对dx dy的偏移量。缩放到哪

ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);//剪切一块到哪，从哪到哪，在哪画多大的图



//获取图片资源的两种方法



//第一种 用标签的方式

var img=document.getElementById("img");

ctx.drawImage(img,200,200,100,100);



//第二种 用创建Image对象的方法

(function(){

var img=new Image();

img.src='face.jpg';

ctx.drawImage(img,100,100,200,200);

})()



//图片绘制getImageData()方法七个参数（图，在哪画，找图起始位置，尺寸）

//putImageData()方法

ctx.drawImage(img,200,200,100,100);

//获取像素数据

var img=ctx.getImageData(0,0,200,200);//获取这一区域内的像素信息

//将取得的数据画到画布上

ctx.putImageData(img,100,100,30,30,100,100);