Canvas 详细教程(二)

文章目录

Canvas 详细教程(二)1：使用图片2：变形3：裁剪4：动画

1：使用图片

drawImage(img,x,y) img：图片源地址x,y：图片的 x,y 位置

请确保图片装载完再执行 drawImage，否则什么都不会发生。

function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0) } img.src = './ai.png'; } else { //不支持 } } draw();

您还可以使用base64编码的图片和使用视频帧。

drawImage(image, x, y, width, height) img：图片源地址x,y：图片的 x,y 位置width,height：图片向 Canvas 画入时缩放的大小 var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0,250,250) } img.src = './ai.png';

drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) img：图片源地址sx, sy, sWidth, sHeight：切入的位置及大小dx, dy, dWidth, dHeight：切片的大小及位置 var img = new Image(); img.onload = function(){ ctx.drawImage(img, 150, 80, 250, 250, 0, 0, 250, 250) } img.src = './ai.png';

2：变形

方法描述save()保存画布的所有状态restore()恢复画布的上一次状态（可多次调用） function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillStyle = '#2d8cf0' ctx.fillRect(0,0,150,150); ctx.save(); // 保存默认状态 ctx.fillStyle = '#19be6b' ctx.fillRect(15,15,120,120); ctx.save(); // 保存当前状态 ctx.fillStyle = '#ff9900' ctx.fillRect(30,30,90,90); ctx.restore(); // 重新加载之前的颜色状态 ctx.fillRect(45,45,60,60); // 使用上一次的配置绘制一个矩形 } else { //不支持 } } draw();

移动：

translate(x, y) x：左右偏移量y：上下偏移量 function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillStyle = '#ff9900' ctx.translate(30,30); ctx.fillRect(0,0,90,90); } else { //不支持 } } draw();

旋转：

rotate(angle) angle：旋转角度（顺时针） function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.translate(175,175); ctx.fillStyle = '#ff9900' ctx.fillRect(0,0,90,90); ctx.save(); ctx.restore(); ctx.rotate(Math.PI/4) ctx.fillStyle = "#2d8cf0" ctx.fillRect(0,0,90,90); } else { //不支持 } } draw();

缩放：

scale(x, y) x：水平缩放（默认值1）y：垂直缩放（默认值1） function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.strokeRect(30, 30, 50, 50); ctx.scale(2, 2); ctx.strokeRect(30, 30, 50, 50); } else { //不支持 } } draw();

变形：

transform(a, b, c, d, e, f) 方法描述a水平方向的缩放b水平方向的倾斜偏移c竖直方向的倾斜偏移d竖直方向的缩放e水平方向的移动f竖直方向的移动 function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.strokeRect(130, 130, 50, 50); ctx.transform(1, 0.1, -0.1, 1, 0, 0) ctx.strokeRect(130, 130, 50, 50); } else { //不支持 } } draw();

3：裁剪

clip()

裁剪区域以外的内容都会被隐藏

function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillRect(150, 150, 30, 30); ctx.clip(); ctx.fillRect(130, 130, 150, 150); } else { //不支持 } } draw();

4：动画

设定定期执行一个指定函数

方法描述setInterval(function, delay)当设定好间隔时间后，function会定期执行。setTimeout(function, delay)当设定好间隔时间后，function会定期执行。（使用键盘或者鼠标事件配合）requestAnimationFrame(callback)告诉浏览器你希望执行一个动画，并在重绘之前，请求浏览器执行一个特定的函数来更新动画。cancelAnimationFrame(vab)关闭某动画 var aa = 50; var img = new Image(); img.src = './hello.png'; function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.globalCompositeOperation = 'destination-over'; ctx.clearRect(0,0,500,500); // clear canvas ctx.save(); ctx.beginPath(); ctx.drawImage(img,aa,50,50,50) ctx.stroke(); aa+=1; window.requestAnimationFrame(draw); } else { //不支持 } } window.requestAnimationFrame(draw);

canvas.addEventListener('mouseover', function(e){}); mouseover：检测鼠标进入mouseout：检测鼠标离开mousemove：检测鼠标移动 var aa = 50; var img = new Image(); img.src = './hello.png'; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var move; function draw(){ if (canvas.getContext){ ctx.globalCompositeOperation = 'destination-over'; ctx.clearRect(0,0,500,500); // clear canvas ctx.save(); ctx.beginPath(); ctx.drawImage(img,aa,50,50,50) ctx.stroke(); aa+=1; move = window.requestAnimationFrame(draw); } else { //不支持 } } canvas.addEventListener("mouseover",function(e){ move = window.requestAnimationFrame(draw); }); canvas.addEventListener('mouseout', function(e){ window.cancelAnimationFrame(move); });