canvas绘图基础整理
Canvas学习
一、熟悉一下:
window.οnlοad=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.οnlοad=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.οnlοad=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);