canvas画布操作(平移，缩放，交互缩放) |
您所在的位置：网站首页 › 使用canvas绘制平移,旋转,缩放,保存与恢复效果 › canvas画布操作(平移，缩放，交互缩放) |
canvas画布操作(平移，缩放，交互缩放)
|
canvas 是html的一个特殊标签，利用JavaScript 在网页上绘制图像。 我们可以控制canvas区域的每一像素。并且拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 1 canvas 画布平移 画布平移使用的方法是 ctx.translate(x,y)；这里我们将画布往x轴正方向和y轴正方向平移一半距离；那么canvas画布的(0，0)位置，自然就在中心位置了
全部代码 canvas 平移 html, body { border: 0; margin: 0; padding: 0; width: 100%; height: 100%; font-size: 13px; } //初始化canvas let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); let width = canvas.width = 500; let height = canvas.height = 500; ctx.lineWidth = "2"; ctx.fillStyle = "green"; ctx.rect(0, 0, width, height); ctx.fill(); ctx.strokeStyle = "red"; ctx.stroke(); // 绘制网格 grid(width, height, 50); originText(width, height, ctx); function originText(width, height, ctx) { ctx.translate(width / 2, height / 2); ctx.font = "12px Arial"; ctx.fillStyle = "white"; ctx.beginPath(); ctx.fillStyle = 'white'; ctx.arc(0, 0, 5, 0, Math.PI * 2, false); ctx.fillText("新原点(0,0)", 0, 0); ctx.arc(-width / 2, -height / 2, 5, 0, Math.PI * 2, false); ctx.fill(); ctx.fillText("旧原点(0,0)", -width / 2 + 10, -height / 2 + 10); } function grid(width, height, interval) { for (let y = 50; y < height; y = y + interval) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(width, y); ctx.stroke(); } for (let x = 50; x < width; x = x + interval) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, height); ctx.stroke(); } }2 canvas 缩放变换 很简单 一个方法 ctx.scale(2, 2)
全部代码 canvas 放缩 html, body { border: 0; margin: 0; padding: 0; width: 100%; height: 100%; font-size: 13px; } //初始化canvas let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); const width = canvas.width = 500; const height = canvas.height = 500; ctx.fillStyle = "green"; ctx.fillRect(0, 0, 50, 50); grid(width, height, 25) ctx.globalCompositeOperation = "destination-over"; ctx.scale(2, 2); //执行该句后；后续绘制每像素单位为之前的2倍 ctx.fillStyle = 'red' ctx.fillRect(50, 50, 50, 50); function grid(width, height, interval) { for (let y = 25; y < height; y = y + interval) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(width, y); ctx.stroke(); } for (let x = 25; x < width; x = x + interval) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, height); ctx.stroke(); } }3 鼠标滚动缩放，拖动平移 结合鼠标mousewheel，drag等事件，交互拖动和缩放canvas；原理就是鼠标没交互一次，将画布清除，然后重绘；效果和全部代码如下
canvas 鼠标缩放 拖动平移 canvas { border: 1px solid #ccc; } (function() { var c = document.getElementById('canvas'); var ctx = c.getContext('2d'); var ax, ay, r = 30, num = 1; //绘制图形的参数 var timeOutEvent = 0; //区分拖拽和点击的参数 //创建图形 function createBlock(a, b, r) { ctx.beginPath(); ctx.fillStyle = 'red'; ctx.arc(a, b, r, 0, Math.PI * 2); ctx.fill(); } createBlock(200, 200, 30); c.onmousedown = function(ev) { var e = ev || event; var x = e.clientX; var y = e.clientY; timeOutEvent = setTimeout('longPress()', 500); e.preventDefault(); drag(x, y, r); }; //缩放 c.onmousewheel = function(ev) { var e = ev || event; num += e.wheelDelta / 1200; r = 30 * num; ctx.clearRect(0, 0, c.width, c.height); if (ax == null || ay == null) { createBlock(200, 200, r); } else { if (r > 0) { createBlock(ax, ay, r); } } }; //拖拽函数 function drag(x, y, r) { if (ctx.isPointInPath(x, y)) { //路径正确，鼠标移动事件 c.onmousemove = function(ev) { var e = ev || event; ax = e.clientX; ay = e.clientY; clearTimeout(timeOutEvent); timeOutEvent = 0; //鼠标移动每一帧都清除画布内容，然后重新画圆 ctx.clearRect(0, 0, c.width, c.height); createBlock(ax, ay, r); }; //鼠标移开事件 c.onmouseup = function() { c.onmousemove = null; c.onmouseup = null; clearTimeout(timeOutEvent); if (timeOutEvent != 0) { alert('你这是点击，不是拖拽'); } }; } } function longPress() { timeOutEvent = 0; } })(); |
【本文地址】