canvas 阴影和图形变换的示例代码


Posted in HTML / CSS onJanuary 02, 2018

本文介绍了canvas 阴影和图形变换的示例代码,分享给大家,具体如下:

一、阴影设置

1、阴影的颜色:值为标准的CSS颜色值,用于设定阴影颜色效果,默认是全透明的黑色

context.shadowColor = color;

2、阴影模糊度:用户设定阴影的模糊程度,其数值不跟像素挂钩,默认为0

context.shadowBlur = 5;

3、阴影的偏移:

shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,它们默认都为 0

context.shadowOffsetX = 10; //正值:往右
context.shadowOffsetY = 10;  //正值:往下

4、设置文字阴影的例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="500" height="500"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 50px 微软雅黑";
        context.fillStyle="red";
        //阴影的颜色
        context.shadowColor = "orangered";
        //阴影模糊度
        context.shadowBlur = 20;
        //阴影的偏移
        context.shadowOffsetX = 10; //正值:往右
        context.shadowOffsetY = 10;  //正值:往下
        context.fillText("你好",100,100);
    </script>
</html>

canvas 阴影和图形变换的示例代码
 

二、图形变换

我们之前在2D变换中也学习过这些知识,但是我们canvas图形变换有所不同,不同点就是这里的变换并不是变换图形,而是变换坐标系,因此,我们在变换完一个图形之后,坐标系就发生变换了,那么我们如果再直接绘图的话就会出现问题,下面我们来具体是什么情况吧

1、为了验证我们上面的说法,我们来看一个例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="800" height="800"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        //用黑色直线线表示开始的x/y轴
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.lineTo(800,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.lineTo(0,800);
        context.stroke();
        //原矩形:蓝色
        context.beginPath();
        context.fillStyle = "cornflowerblue";
        context.fillRect(0,0,50,50);
        context.fill();
        //平移矩形:粉色
        context.beginPath();
        context.translate(200,0)  //正:往右、下
        context.fillStyle = "deeppink";
        context.fillRect(0,0,50,50);
        context.fill();
        //用蓝色直线表示平移以后的坐标轴
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.lineTo(400,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.lineTo(0,400);
        context.stroke();
    </script>
</html>

得到如下效果:证明图形变换以后是改变了坐标系的

canvas 阴影和图形变换的示例代码
 

2、旋转

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="800" height="800"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        //用黑色直线表示平移以后的坐标轴
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.lineTo(800,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.lineTo(0,800);
        context.stroke();
        //原图:蓝色
        context.beginPath();
        context.fillStyle = "cornflowerblue";
        context.fillRect(100,0,50,50);
        context.fill(); 
        //旋转:绿色
        context.beginPath();
        context.fillStyle = "limegreen";
        context.rotate(Math.PI/4);
        context.fillRect(100,0,50,50);
        //用蓝色直线表示平移以后的坐标轴
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.lineTo(800,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.lineTo(0,800);
        context.stroke();
    </script>
</html>

效果如下:

canvas 阴影和图形变换的示例代码
 

说明我们图形默认是绕canvas坐标系原点旋转的,图形在旋转的过程中,坐标系也会跟着旋转

3、图形缩放

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="800" height="800"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        //用黑色直线线表示开始的坐标系
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 30;
        context.lineTo(100,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 30;
        context.lineTo(0,100);
        context.stroke();
        //原图:蓝色
        context.beginPath();
        context.fillStyle = "cornflowerblue";
        context.fillRect(100,0,50,50);
        context.fill();
        //缩放:粉色  ,放大/小坐标系,图形大小也缩放
        context.scale(2,1);   //第一个参数是X轴缩放比例,第二个参数是Y轴缩放比例
        context.beginPath();
        context.fillStyle = "pink";
        context.fillRect(100,0,50,50);
    //用蓝色直线表示平移以后的坐标轴
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.strokeStyle = "blue";
        context.lineTo(100,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.strokeStyle = "blue";
        context.lineTo(0,100);
        context.stroke();
    </script>
</html>

效果如下:

canvas 阴影和图形变换的示例代码
 

我们可以看到,我们在放大X轴图形的宽度时,我们的坐标系的X轴也跟着放大了

那我们在对canvas图形做变换之后,怎么才能重新再canvas上绘制我们我们想要的图形而又不用繁琐的方式将他改变的坐标系恢复呢?
 

刚好canvas有状态的保存和获取

canvas 阴影和图形变换的示例代码

比如我们拿上面写过的例子进行演示一下状态的保存和获取效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="800" height="800"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        //用黑色直线线表示开始的坐标系
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 30;
        context.lineTo(100,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 30;
        context.lineTo(0,100);
        context.stroke();
        //原图:蓝色
        context.beginPath();
        context.fillStyle = "cornflowerblue";
        context.fillRect(100,0,50,50);
        context.fill();
        //缩放:粉色  ,放大/小坐标系,图形大小也缩放
        context.save();
        context.scale(2,1);   //第一个参数是X轴缩放比例,第二个参数是Y轴缩放比例
        context.beginPath();
        context.fillStyle = "pink";
        context.fillRect(100,0,50,50);
        context.restore();
    //用蓝色直线表示平移以后的坐标轴
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.strokeStyle = "blue";
        context.lineTo(100,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.strokeStyle = "blue";
        context.lineTo(0,100);
        context.stroke();
    </script>
</html>

canvas 阴影和图形变换的示例代码

正如你看到的效果图,我们在缩放之前保存了坐标系的状态,也就是一开始未做任何变动的状态,然后在图像缩放之后我们又将这种状态获取到,也就是回到一开始未做任何变动的状态,这就是状态的保存和获取,这样就可以解决我们图形变换对坐标系的影响了。
 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 #HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 #HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 #HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 #HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 #HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 #HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 #HTML / CSS
You might like
URL Rewrite的设置方法
2007/01/02 PHP
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
JS定时器实例
2013/04/17 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
Python中的默认参数详解
2015/06/24 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
python如何查看微信消息撤回
2018/11/27 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
Python 求向量的余弦值操作
2021/03/04 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
挂牌仪式策划方案
2014/05/18 职场文书
广播体操口号
2014/06/18 职场文书
施工安全员岗位职责
2015/04/11 职场文书
《三国志》赏析
2019/08/27 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python