当前位置：Gxlcms > html代码 > HTML5之7__Canvas:缩放、旋转、创建阴影

HTML5之7__Canvas:缩放、旋转、创建阴影

时间：2021-07-01 10:21:17 帮助过：47人阅读

一. canvas API 的scale() 函数用于缩放.

scale() 带有两个参数，分别代表在x, y 两个维度的值， 每个参数在 canvas 显示图像的时候， 向其传递在本方向轴上图像要放大(或缩小) 的量， 如果x为2, 就代表所绘制图像中全部元素都会变成两倍宽， 如果y 值为0.5 ,绘制出来的图像全部元素都会变成之前的一半高。

例如以下程序很方便地在canvas 上创建出新的树.


  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="UTF-8">
  4.   <title>缩放示例</title>
  5.   <canvas id="trails" style="border: 1px solid;"  width="400" height="600"> </canvas>
  6.   <script>
  7.         var gravel = new Image();
  8.         gravel.src = "gravel.jpg";
  9.         gravel.onload = function () {
  10.             drawTrails();
  11.         }
  12.         function createCanopyPath(context) {
  13.             context.beginPath();
  14.             context.moveTo(-25, -50);
  15.             context.lineTo(-10, -80);
  16.             context.lineTo(-20, -80);
  17.             context.lineTo(-5, -110);
  18.             context.lineTo(-15, -110);
  19.             context.lineTo(0, -140);
  20.             context.lineTo(15, -110);
  21.             context.lineTo(5, -110);
  22.             context.lineTo(20, -80);
  23.             context.lineTo(10, -80);
  24.             context.lineTo(25, -50);
  25.             context.closePath();
  26.         }
  27.         // 将绘制树的方法 放到 drawTree()，方便重用
  28.         function drawTree(context) {
  29.             var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);
  30.             trunkGradient.addColorStop(0, '#663300');
  31.             trunkGradient.addColorStop(0.4, '#996600');
  32.             trunkGradient.addColorStop(1, '#552200');
  33.             context.fillStyle = trunkGradient;
  34.             context.fillRect(-5, -50, 10, 50);
  35.             var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
  36.             canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
  37.             canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');
  38.             context.fillStyle = canopyShadow;
  39.             context.fillRect(-5, -50, 10, 50);
  40.             createCanopyPath(context);
  41.             context.lineWidth = 4;
  42.             context.lineJoin = 'round';
  43.             context.strokeStyle = '#663300';
  44.             context.stroke();
  45.             context.fillStyle = '#339900';
  46.             context.fill();
  47.         }
  48.         function drawTrails() {
  49.             var canvas = document.getElementById('trails');
  50.             var context = canvas.getContext('2d');
  51.             // 在 X=130, Y=250的位置绘制第一棵树
  52.             context.save();
  53.             context.translate(130, 250);
  54.             drawTree(context);
  55.             context.restore();
  56.             // 在 X=260, Y=500 位置绘制第二棵树
  57.             context.save();
  58.             context.translate(260, 500);
  59.             // 将第二棵树的宽高分别放大至原来的2倍
  60.             context.scale(2, 2);
  61.             drawTree(context);
  62.             context.restore();
  63.             context.save();
  64.             context.translate(-10, 350);
  65.             context.beginPath();
  66.             context.moveTo(0, 0);
  67.             context.quadraticCurveTo(170, -50, 260, -190);
  68.             context.quadraticCurveTo(310, -250, 410,-250);
  69.             context.strokeStyle = context.createPattern(gravel, 'repeat');
  70.             context.lineWidth = 20;
  71.             context.stroke();
  72.             context.restore();
  73.         }
  74.   </script>
  75. </html>


二. 旋转 context.rotate(angle), 参数angle 以弧度为单位

看代码 


  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="UTF-8">
  4.   <title>旋转示例</title>
  5.   <canvas id="trails" style="border: 1px solid;"  width="400" height="600"> </canvas>
  6.   <script>
  7.         var gravel = new Image();
  8.         gravel.src = "gravel.jpg";
  9.         gravel.onload = function () {
  10.             drawTrails();
  11.         }
  12.         function createCanopyPath(context) {
  13.             context.beginPath();
  14.             context.moveTo(-25, -50);
  15.             context.lineTo(-10, -80);
  16.             context.lineTo(-20, -80);
  17.             context.lineTo(-5, -110);
  18.             context.lineTo(-15, -110);
  19.             context.lineTo(0, -140);
  20.             context.lineTo(15, -110);
  21.             context.lineTo(5, -110);
  22.             context.lineTo(20, -80);
  23.             context.lineTo(10, -80);
  24.             context.lineTo(25, -50);
  25.             context.closePath();
  26.         }
  27.         // 将绘制树的方法 放到 drawTree()
  28.         function drawTree(context) {
  29.             var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);
  30.             trunkGradient.addColorStop(0, '#663300');
  31.             trunkGradient.addColorStop(0.4, '#996600');
  32.             trunkGradient.addColorStop(1, '#552200');
  33.             context.fillStyle = trunkGradient;
  34.             context.fillRect(-5, -50, 10, 50);
  35.             var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
  36.             canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
  37.             canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');
  38.             context.fillStyle = canopyShadow;
  39.             context.fillRect(-5, -50, 10, 50);
  40.             createCanopyPath(context);
  41.             context.lineWidth = 4;
  42.             context.lineJoin = 'round';
  43.             context.strokeStyle = '#663300';
  44.             context.stroke();
  45.             context.fillStyle = '#339900';
  46.             context.fill();
  47.         }
  48.         function drawTrails() {
  49.             var canvas = document.getElementById('trails');
  50.             var context = canvas.getContext('2d');
  51.             // 在 X=130, Y=250的位置绘制第一棵树
  52.             context.save();
  53.             context.translate(100, 150);
  54.             context.rotate(1.57);    //旋转角度以弧度为单位
  55.             drawTree(context);
  56.             context.restore();
  57.             context.save();
  58.             context.translate(-10, 450);
  59.             context.beginPath();
  60.             context.moveTo(0, 0);
  61.             context.quadraticCurveTo(170, -50, 260, -190);
  62.             context.quadraticCurveTo(310, -250, 410,-250);
  63.             context.strokeStyle = context.createPattern(gravel, 'repeat');
  64.             context.lineWidth = 20;
  65.             context.stroke();
  66.             context.restore();
  67.         }
  68.   </script>
  69. </html>


以上两个示例，需要注意之处：

始终在原点执行图形和路径的变换操作
示例中演示了为什么要在原点执行图形和路径的变换 操作, 执行完后再统一平移. 因为缩放 scale 和旋转 rotate 等变换操作都是针对原点进行的.

如果对一个不在原点的图形进行旋转， 那么图形绕着原点旋转而不是在原地旋转。 类似地，如果进行缩放操作时没有将图形放置到合适的坐标上，那么所有坐标都会被同时缩放, 新的坐标可能会超出canvas 范围。

三. 创建阴影

以下示例，演示如何对路径坐标进行随意变换， 以从根本上改变现在树的路径显示，最终创建一个阴影效果。 相关代码：


  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="UTF-8">
  4.   <title>变换阴影</title>
  5.   <canvas id="trails" style="border: 1px solid;"  width="400" height="600"> </canvas>
  6.   <script>
  7.         var gravel = new Image();
  8.         gravel.src = "gravel.jpg";
  9.         gravel.onload = function () {
  10.             drawTrails();
  11.         }
  12.         function createCanopyPath(context) {
  13.             context.beginPath();
  14.             context.moveTo(-25, -50);
  15.             context.lineTo(-10, -80);
  16.             context.lineTo(-20, -80);
  17.             context.lineTo(-5, -110);
  18.             context.lineTo(-15, -110);
  19.             context.lineTo(0, -140);
  20.             context.lineTo(15, -110);
  21.             context.lineTo(5, -110);
  22.             context.lineTo(20, -80);
  23.             context.lineTo(10, -80);
  24.             context.lineTo(25, -50);
  25.             context.closePath();
  26.         }
  27.         function drawTree(context) {
  28.             context.save();
  29.             // X值随着Y值的增加而增加，借助拉伸变换，可以创建一棵用作阴影的倾斜的树，应用了
  30.             // 变换以后，所有坐标都与矩阵相乘
  31.             context.transform(1, 0, -0.5, 1,  0, 0);
  32.             // 在Y轴方向，将阴影的高度压缩为原来的60%
  33.             context.scale(1, 0.6);
  34.             // 使用透明度为20%的黑色填充树干
  35.             context.fillStyle = 'rgba(0, 0, 0, 0.2)';
  36.             context.fillRect(-5, -50, 10, 50);
  37.             // 使用已有的阴影效果重新绘制
  38.             createCanopyPath(context);
  39.             context.fill();
  40.             context.restore();
  41.             var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);
  42.             trunkGradient.addColorStop(0, '#663300');
  43.             trunkGradient.addColorStop(0.4, '#996600');
  44.             trunkGradient.addColorStop(1, '#552200');
  45.             context.fillStyle = trunkGradient;
  46.             context.fillRect(-5, -50, 10, 50);
  47.             var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
  48.             canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
  49.             canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');
  50.             context.fillStyle = canopyShadow;
  51.             context.fillRect(-5, -50, 10, 50);
  52.             createCanopyPath(context);
  53.             context.lineWidth = 4;
  54.             context.lineJoin = 'round';
  55.             context.strokeStyle = '#663300';
  56.             context.stroke();
  57.             context.fillStyle = '#339900';
  58.             context.fill();
  59.         }
  60.         function drawTrails() {
  61.             var canvas = document.getElementById('trails');
  62.             var context = canvas.getContext('2d');
  63.             context.save();
  64.             context.translate(130, 250);
  65.             drawTree(context);
  66.             context.restore();
  67.             context.save();
  68.             context.translate(260, 500);
  69.             context.scale(2, 2);
  70.             drawTree(context);
  71.             context.restore();
  72.             context.save();
  73.             context.translate(-10, 350);
  74.             context.beginPath();
  75.             context.moveTo(0, 0);
  76.             context.quadraticCurveTo(170, -50, 260, -190);
  77.             context.quadraticCurveTo(310, -250, 410,-250);
  78.             context.strokeStyle = context.createPattern(gravel, 'repeat');
  79.             context.lineWidth = 20;
  80.             context.stroke();
  81.             context.restore();
  82.         }
  83.   </script>
  84. </html>


分析这种变换背后的数学含义， 可以看出通过调整与Y轴值相对应的参数改变了X轴的值， 这样做是为了拉伸出一查灰色的树做阴影。 接下来， 我们按照60% 的比例将剪裁出的树缩小到了合适的尺寸。

剪裁过的 “阴影” 树会先被显示出来， 这样一来， 真正的树就会按照Z轴(canvas 中对象的重叠顺序) 显示在阴影的上面。 此外树影的填充用到了CSS 的RGBA特性， 通过特性我们将透明度值设为正常情况下的20%, 至此，带有半透明效果的树影就做好了。

示例中用到图片 gravel.jpg 在之前博文可找到.

以上就是HTML5之7 __Canvas: 缩放、旋转、创建阴影的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！