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

最新推荐文章于 2024-08-14 14:56:10 发布
最新推荐文章于 2024-08-14 14:56:10 发布
阅读量3.3k 收藏 7
点赞数 1
分类专栏： HTML5 HTML5程序设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aduovip/article/details/45603459
版权

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

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

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

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
  <title>缩放示例</title>
  <canvas id="trails" style="border: 1px solid;"  width="400" height="600"> </canvas>
  <script>
        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();
        }
  </script>
</html>

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

看代码 

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
  <title>旋转示例</title>
  <canvas id="trails" style="border: 1px solid;"  width="400" height="600"> </canvas>
  <script>
        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();
        }

  </script>
</html>

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

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

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

三.  创建阴影  

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

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
  <title>变换阴影</title>
  <canvas id="trails" style="border: 1px solid;"  width="400" height="600"> </canvas>
  <script>
        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();
        }
  </script>
</html>

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

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

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

109905418
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html画布用函数旋转,canvas rotate()画布的旋转详解
weixin_33978722的博客
06-15 2439
刚才仍是风和日丽的天，这没一会会就乌云密布了，雨呀，眼瞅就下来了呢，一场秋雨一场寒，感受懂得要穿棉袄了的节奏10月1号以前，仍是T恤呢，10月放完国庆节和中秋节之后就开始毛衣、毛衫、毛外套了，这真的是8天过了一个季节呀~~~大概北方的秋天都是这么快的吧继续来看看canvas的rotate()方法rotate()旋转当前的绘图。语法：context.rotate(angle)参数：angle旋转角度...
HTML5 Canvas万花筒旋转特效特效代码
03-20
"HTML5 Canvas万花筒旋转特效"是利用Canvas API实现的一种视觉效果，模拟了真实世界中万花筒的变幻与旋转，为用户带来极具吸引力的视觉体验。这种特效通常用于网站背景、游戏元素或者是互动艺术展示等场景，能够提升...
Html5 Canvas初探学习笔记(8) -阴影
编程资料大全
03-29 105
小满（bill man）个人原创，欢迎转载，转载请注明地址，小满（bill man）的专栏地址http://blog.csdn.net/bill_man 本篇继续介绍html5的一些状态值，html5的绘制上下文提供了丰富的效果，本篇介绍阴影的效果，阴影有四个状态值控制，分别是shadowBlur，shadowOffsetX，shadowOffsetY和shadowColor。其中shado...
如何用canvas实现fabricjs(图层、拖拽、旋转、拉伸)功能
sinat_37066308的博客
06-27 1329
本文介绍fabricjs的部分功能（拖拽，图层，选择，缩放，旋转等）的实现思路，水平有限仅供参考。 项目git仓库 ： github.com/pengzhijian… 在最底部也有所有效果的完整代码，有需要的自取。
HTML5 Canvas阴影用法演示
jishublog
07-16 182
HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为： context.shadowColor = “red” 表示设置阴影颜色为红色 context.shadowOffsetX = 0表示阴影相对TEXT的水平距离，0表示两者水平位置重合 context.shadowOffsetY = 0表示阴影相对TEXT的垂直距离，0表示两者垂直位置重合 ...
Canvas阴影
Ping果狸的博客
01-22 375
Canvas阴影 Canvas提供四个接口设置阴影： 设置阴影颜色：context.shadowColor 设置阴影位移值：context.shadowOffsetX、context.shadowOffsetY（可以取负值，取负值时阴影在左、上方向） 阴影模糊程度：context.shadowBlur context.fillStyle="#848"; context.
canvas-缩放
diangengdan7347的博客
02-28 212
Canvas-图片缩放 由上一篇canvas-旋转的例子可以了解到canvas的一些特性，不熟悉的同学可以先去看看canvas-旋转。 我们在将图片引入canvas时，图片会一原始像素渲染。这样往往不是我们想要的大小。这时就要用到canvas的scale(x, y)方法：如果您对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位...
7phtext_HTML5_CSS3源码_
09-29
在"7phtext_HTML5_CSS3源码_"这个压缩包中，包含的是一组利用CSS3的新特性来实现的HTML5文本图像变换效果。这些效果能够帮助开发者创建出极具视觉冲击力和创新性的网页元素。 1. **HTML5**：HTML5是超文本标记语言...
HTML5 Canvas实现3D旋转物体动画及模糊发光特效源码
09-01
在这个项目中，我们看到HTML5 Canvas被用来创建一个3D旋转物体的动画，同时结合CSS3的技术，实现了物体的模糊发光特效。 首先，让我们深入了解一下HTML5 Canvas的基本概念。Canvas是一个基于矢量图形的画布，通过...
html5 canvas实现旋转的3D几何模型动画特效源码.zip
11-03
在这个名为“html5 canvas实现旋转的3D几何模型动画特效源码.zip”的压缩包中，我们很显然会涉及到使用HTML5 Canvas API来构建旋转的3D几何模型动画的技巧和方法。 首先，Canvas API提供了`drawImage()`、`fillRect...
HTML-Canvas:有趣的画布
05-31
HTML Canvas还支持渐变、阴影、图片的绘制和旋转、缩放等变换操作，这极大地扩展了其表现力。例如，创建一个线性渐变： ```javascript var gradient = ctx.createLinearGradient(0, 0, 200, 0); gradient....
34 canvas阴影
丨Anna丨的博客
10-29 754
34 canvas阴影 canvas阴影包括文本阴影和盒模型阴影 语法 shadowOffsetX = float shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离， 它们默认都为 0。 shadowOffsetY = float shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离， 它们默认都为 0。 shadowBlur = float shadowBlur 用于设定阴影
canvas设置图形的阴影
大剑师兰特的GIS世界
01-06 1118
如何使用canvas设置文字阴影呢？canvas内置了一个阴影的方法，使用ctx.shadowBlur即可。图形的填充色使用fillStyle，图形的边框颜色使用strokeStyle。
canvas学习（十一）：阴影
总有一天，你的日积月累，会成为别人的望尘莫及
08-02 381
使用canvas绘制为图形添加阴影比较简单，主要是四个方法： shadowColor：设置阴影颜色   shadowOffsetX：设置图形与阴影的水平距离，也是水平偏移量。当shadowOffsetX=0时，表示阴影位于形状的正下方，shadowOffsetX=20时表示阴影位于形状 left 位置右侧的 20 像素处，当shadowOffsetX=-20时表示阴影位于形状 left ...
canvas 阴影
Fly to sky
05-08 403
canvas 的阴影有四个参数控制  分别是X 偏移 Y偏移  阴影颜色  阴影尺寸。context.shadowOffsetX = 10;context.shadowOffsetY = 10;context.shadowColor = 'rgba(100,100,100,0.5)';context.shadowBlur =5;
html旋转 缩放 移动,HTML5之Canvas绘图——Canvas画布调整之移动、缩放、旋转
weixin_33754744的博客
06-18 349
HTML5之Canvas绘图——Canvas画布调整之移动、缩放、旋转body{margin:20px auto; padding:0; width:1000px }canvas{border:dashed 2px #ccc}span{font-size:16px; cursor:pointer}function $$(id){return document.getElementById(id);...
【canvas】canvas基础使用（六）：图形阴影
qq_2511276124的博客
04-11 858
阴影一般不使用。
canvas创建阴影
Jinmy的博客
09-19 322
我们可以使用4个参数给画布上的形状添加阴影。 shadowOffsetX shadowOffsetY shadowBlur shadowColor 例子：给对象添加阴影 &lt;!DOCTYPE HTML&gt; &lt;html lang="cn"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&am
Canvas 设置图形的阴影
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-14 823
其中，阴影效果是一种常用的视觉增强手段，它可以给图形增加深度感和立体感，使页面元素更加生动有趣。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。除了上面提到的基本用法外，我们还可以利用阴影特性来实现一些更高级的效果，比如创建光晕、模拟光源等。这些知识不仅可以提升您的技能，还能为您的项目增添更多的创意和可能性。接下来，我们将修改阴影的颜色，看看它如何影响最终的视觉效果。中设置图形的阴影，并通过多个示例展示不同的阴影应用方法。专栏系列（点击解锁）
HTML5 Canvas：网页互动与动画核心技术
本书《HTML5 Canvas》由Steve Fulton和Jeff Fulton撰写，深入介绍了如何利用HTML5的Canvas API来创建交互式和动画效果，从而为Web提供原生的互动性和动态表现力。" HTML5 Canvas是一个基于矢量图形的画布元素，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值