告诉你个好玩的，我最近迷上了CanvasAPI里的scale()函数，这个函数能把图片缩小放大，还能玩出很多花样。就像画出一颗大树，或者玩转翻转、变大变小等各种效果，让图形看起来更有意思。所以，我想一探究竟，看看这个scale()函数到底有多少魔力，怎样跟转置、阴影效果搭配使用，才能达到视觉艺术的巅峰。
神奇的缩放操作
缩放<a href='https://www.icz.com/technicalinformation/web/2024/05/16101.html' title='示例' target='_blank' rel="noopener">示例</a> var gravel = new Image(); gravel.src = "gravel.jpg"; gravel.onload = function () { drawTrails(); } function createCanopyPath(context) { context.beginPath(); context.moveTo(-25, -50); context.lineTo(-10, -80); context.lineTo(-20, -80); context.lineTo(-5, -110); context.lineTo(-15, -110); context.lineTo(0, -140); context.lineTo(15, -110); context.lineTo(5, -110); context.lineTo(20, -80); context.lineTo(10, -80); context.lineTo(25, -50); context.closePath(); } // 将绘制树的方法 放到 drawTree()，方便重用 function drawTree(context) { var trunkGradient = context.createLinearGradient(-5, -50, 5, -50); trunkGradient.addColorStop(0, '#663300'); trunkGradient.addColorStop(0.4, '#996600'); trunkGradient.addColorStop(1, '#552200'); context.fillStyle = trunkGradient; context.fillRect(-5, -50, 10, 50); var canopyShadow = context.createLinearGradient(0, -50, 0, 0); canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)'); canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)'); context.fillStyle = canopyShadow; context.fillRect(-5, -50, 10, 50); createCanopyPath(context); context.lineWidth = 4; context.lineJoin = 'round'; context.strokeStyle = '#663300'; context.stroke(); context.fillStyle = '#339900'; context.fill(); } function drawTrails() { var canvas = document.getElementById('trails'); var context = canvas.getContext('2d'); // 在 X=130, Y=250的位置绘制第一棵树 context.save(); context.translate(130, 250); drawTree(context); context.restore(); // 在 X=260, Y=500 位置绘制第二棵树 context.save(); context.translate(260, 500); // 将第二棵树的宽高分别放大至原来的2倍 context.scale(2, 2); drawTree(context); context.restore(); context.save(); context.translate(-10, 350); context.beginPath(); context.moveTo(0, 0); context.quadraticCurveTo(170, -50, 260, -190); context.quadraticCurveTo(310, -250, 410,-250); context.strokeStyle = context.createPattern(gravel, 'repeat'); context.lineWidth = 20; context.stroke(); context.restore(); }
CanvasAPI里的scale()函数真是个好帮手，只要设定好x和y两个值，就能轻松搞定图片大小和比例！比如说，把x设成2的话，画出来的东西就会变宽一倍；而y设置成0.5，就会让东西变矮一半。这样一来，不论是画什么形状都变得易如反掌，随便你怎么调，想咋样就咋样，视觉效果美得很哟。
用scale()这个函数时，重点要记住把图形放在原点上再搞变身。因为缩放、旋转这些动作都是围绕原点转圈圈的，要是你的图没在原点，那就得绕个弯儿变形了，而不是就在那儿直接处理。所以，咱们得先把图摆正，然后再去搞那些变身的事儿，这样才能保证效果跟预想的一样好。这就是个小技巧，但能让你的图形变身更精准，展示效果也更好！
旋转示例 var gravel = new Image(); gravel.src = "gravel.jpg"; gravel.onload = function () { drawTrails(); } function createCanopyPath(context) { context.beginPath(); context.moveTo(-25, -50); context.lineTo(-10, -80); context.lineTo(-20, -80); context.lineTo(-5, -110); context.lineTo(-15, -110); context.lineTo(0, -140); context.lineTo(15, -110); context.lineTo(5, -110); context.lineTo(20, -80); context.lineTo(10, -80); context.lineTo(25, -50); context.closePath(); } // 将绘制树的方法 放到 drawTree() function drawTree(context) { var trunkGradient = context.createLinearGradient(-5, -50, 5, -50); trunkGradient.addColorStop(0, '#663300'); trunkGradient.addColorStop(0.4, '#996600'); trunkGradient.addColorStop(1, '#552200'); context.fillStyle = trunkGradient; context.fillRect(-5, -50, 10, 50); var canopyShadow = context.createLinearGradient(0, -50, 0, 0); canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)'); canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)'); context.fillStyle = canopyShadow; context.fillRect(-5, -50, 10, 50); createCanopyPath(context); context.lineWidth = 4; context.lineJoin = 'round'; context.strokeStyle = '#663300'; context.stroke(); context.fillStyle = '#339900'; context.fill(); } function drawTrails() { var canvas = document.getElementById('trails'); var context = canvas.getContext('2d'); // 在 X=130, Y=250的位置绘制第一棵树 context.save(); context.translate(100, 150); context.rotate(1.57); //旋转角度以弧度为单位 drawTree(context); context.restore(); context.save(); context.translate(-10, 450); context.beginPath(); context.moveTo(0, 0); context.quadraticCurveTo(170, -50, 260, -190); context.quadraticCurveTo(310, -250, 410,-250); context.strokeStyle = context.createPattern(gravel, 'repeat'); context.lineWidth = 20; context.stroke(); context.restore(); }
旋转的魅力
CanvasAPI里，除了缩放功能外，还有个厉害的旋转()函数，只要输入角度就能让图形动起来了。这样子能让原本静止的图像更有活力，整个画面看起来更有趣！不过，跟缩放一样，要记得把基准点放在中间，不然图形的旋转方向就不对头~
你知道吗，CanvasAPI其实很牛逼，我们可以把缩小和旋转两个功能搭配使用，做出更炫酷的视觉效果！比如说，先把图片放大，然后再转动它，这样就能让它在各种大小和角度都有不同的样子，给你的观众带来新鲜感十足的体验。这就是我说的结合运用方法，既能显示出CanvasAPI的强大能力，又让我们的创作变得更有趣。
神奇的阴影效果
CanvasAPI不光能放大缩小或转圈儿玩，还有搞阴影的本事，让图形更有深度感和层次感。只要随便动动路径，就能把树的路线变来变去，最后做出来的阴影效果就像真的一样。在这个过程里，还能调整图形大小，让阴影看起来更真实、更立体！
用CSS的RGBA功能，我们可以调暗阴影来做出半透明效果，这样画面就会更有层次感！这种细节处理不仅让图形看起来更美，而且整张图也会更吸引人。另外，合理地设置Z轴，能让真图形在阴影上头显示，这样看起来就更立体、更真实。
变换阴影 var gravel = new Image(); gravel.src = "gravel.jpg"; gravel.onload = function () { drawTrails(); } function createCanopyPath(context) { context.beginPath(); context.moveTo(-25, -50); context.lineTo(-10, -80); context.lineTo(-20, -80); context.lineTo(-5, -110); context.lineTo(-15, -110); context.lineTo(0, -140); context.lineTo(15, -110); context.lineTo(5, -110); context.lineTo(20, -80); context.lineTo(10, -80); context.lineTo(25, -50); context.closePath(); } function drawTree(context) { context.save(); // X值随着Y值的增加而增加，借助拉伸变换，可以创建一棵用作阴影的倾斜的树，应用了 // 变换以后，所有坐标都与矩阵相乘 context.transform(1, 0, -0.5, 1, 0, 0); // 在Y轴方向，将阴影的高度压缩为原来的60% context.scale(1, 0.6); // 使用透明度为20%的黑色填充树干 context.fillStyle = 'rgba(0, 0, 0, 0.2)'; context.fillRect(-5, -50, 10, 50); // 使用已有的阴影效果重新绘制 createCanopyPath(context); context.fill(); context.restore(); var trunkGradient = context.createLinearGradient(-5, -50, 5, -50); trunkGradient.addColorStop(0, '#663300'); trunkGradient.addColorStop(0.4, '#996600'); trunkGradient.addColorStop(1, '#552200'); context.fillStyle = trunkGradient; context.fillRect(-5, -50, 10, 50); var canopyShadow = context.createLinearGradient(0, -50, 0, 0); canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)'); canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)'); context.fillStyle = canopyShadow; context.fillRect(-5, -50, 10, 50); createCanopyPath(context); context.lineWidth = 4; context.lineJoin = 'round'; context.strokeStyle = '#663300'; context.stroke(); context.fillStyle = '#339900'; context.fill(); } function drawTrails() { var canvas = document.getElementById('trails'); var context = canvas.getContext('2d'); context.save(); context.translate(130, 250); drawTree(context); context.restore(); context.save(); context.translate(260, 500); context.scale(2, 2); drawTree(context); context.restore(); context.save(); context.translate(-10, 350); context.beginPath(); context.moveTo(0, 0); context.quadraticCurveTo(170, -50, 260, -190); context.quadraticCurveTo(310, -250, 410,-250); context.strokeStyle = context.createPattern(gravel, 'repeat'); context.lineWidth = 20; context.stroke(); context.restore(); }
用CanvasAPI里的scale(),rotate()和阴影功能，就可以画出各种各样好玩的图案和画作。这个过程不仅有趣，还能提高咱们的审美观和想象力，让咱们享受创作带来的满足和快乐。
评论0