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 相关文章推荐
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
php筛选不存在的图片资源
2015/04/28 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
python 显示数组全部元素的方法
2018/04/19 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
HTML5通用接口详解
2016/06/12 HTML / CSS
经典c++面试题四
2015/05/14 面试题
EJB实例的生命周期
2016/10/28 面试题
优秀党员转正的自我评价
2013/10/06 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
2015年招聘工作总结
2014/12/12 职场文书
西安导游词
2015/02/12 职场文书
理想国读书笔记
2015/06/25 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL
Redis分布式锁的7种实现
2022/04/01 Redis
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python