canvas --画图、图片

画图：

< script >

var canvas = document. querySelector( "#canvas");

canvas. width = 600;

canvas. height = 600;

var pen = canvas. getContext( '2d');

// pen.strokeRect(10,10,200,50);

// //保存（这一次画布的信息）

// pen.save();

// //改变画布 旋转25° 旋转的是画布

// pen.rotate(25*Math.PI/180);

// //在新画布上作图

// pen.strokeRect(10,10,200,50);

pen. strokeRect( 200, 250, 200, 50);

//保存（这一次画布的信息）

pen. save();

//把画布移动到600，0的位置；

pen. translate( 600, 0);

//把画布旋转90°

pen. rotate( 90* Math. PI/ 180);

/ /在新画布上作画

pen. strokeRect( 175, 275, 200, 50);

//还原以前保存的画布

pen. restore();

</ script >

保存canvas画的图

把canvas画的图片保存为base64编码的内容

toDataURL(‘image/png,1)

参数:1.保存的图片类型 2.保存的图片质量(0-1)

//保存canvas画的图

var canvasImg = canvas. toDataURL( "image/png", 1);

//使用

document. querySelector( "#img"). src = canvasImg;

画布渲染画布:

canvas2.drawImage(canvas1,0,0)

一个用户看不见的画布画图,画好了以后把这个看不见的画布画到另外一个用户看得见的画布上(提升用户体验)

(function(){

//创建一个用户看不见的画布

var canvasHide=document.createElement('canvas')

canvasHide.width=600;

canvasHide.height=600;

var penHide=canvasHide.getContext('2d')

//画图

penHide.fillRect(40,40,100,200)

//获取并设置用户看得见的画布

var canvas=document.getElementById('canvas')

var pen=canvas.getContext('2d')

canvas.width=600

canvas.height=600

canvas.style.border='1px solid blue'

//把看不见的画完画的画布画到看得见得画布上

pen.drawImage(canvasHide,0,0)

})()

//绘制一个重叠样子的图片

for(var i=0;i<10;i++){pen.drawImage(img,100+20*i,100+20*i)}

TIPs:

canvas重叠的部分不会乘以2 盒子重叠的部分要乘以2

图片：

pen.drawImage(img,x,y);//先学这个,img是图片对象

pen.drawImage(img,sx,sy,sw,sh,x,y,w,h);

参数:除红色参数外都是可选参数

img 图片对象//可以是标签对象,可以自己创建:var img=new Image();img.src=’xxx’

sx,sy 可选,剪切相对于(原始图片左上角开始)原始图片x,y 坐标

sw,sh可选,剪切原始图片的宽高

x,y 绘制图片的x,y坐标

w,h 可选,绘制图片的宽高

border-image ：url（imgsrc） 100/50px round;

案例--制作动画：

< script >

var canvas = document. querySelector( "#canvas1");

canvas. width = 600;

canvas. height = 600;

var pen = canvas. getContext( '2d');

var img1= document. querySelector( "#img1");

//。。。下面这个两行代码可以不要上面这一行代码

var img2 = new Image();

img2. src= 'boy.png';

//window onload 和 图片onload是两回事

var i = 0;

var index2 = 500;

var btn = document. querySelector( "#btn");

var timer= null;

// function change () {

// var index1 = 306/4;

// //图片 切割开始位置：0，0 切割后在canvas中的位置：100，100 设置切割后图片的宽高：360/2 ，130；

// pen.drawImage(img2,index1*i,3,306/4,130,index2,100,306/4,130);

// i++;

// index2--;

// i%=4;

// }

img2. onload = function () {

btn. onclick = function () {

setInterval( change, 200)

};

function change () {

var index1 = 306/ 4;

//图片 切割开始位置：0，0 切割的宽高 切割后在canvas中的位置：100，100 设置切割后图片的宽高：360/2 ，130；

pen. drawImage( img2, index1* i, 3, 306/ 4, 130, index2, 100, 306/ 4, 130);

i++;

index2--;

i%= 4;

}

};

// btn.onclick = function () {

// setInterval(change,200)

// }

</ script >