JavaScript之Canvas_动力节点Java学院整理


Posted in Javascript onJuly 04, 2017

Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等。

没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制。

一个Canvas定义了一个指定尺寸的矩形框,在这个范围内我们可以随意绘制:

<canvas id="test-canvas" width="300" height="200"></canvas>

由于浏览器对HTML5标准支持不一致,所以,通常在<canvas>内部添加一些说明性HTML代码,如果浏览器支持Canvas,它将忽略<canvas>内部的HTML,如果浏览器不支持Canvas,它将显示<canvas>内部的HTML:

<canvas id="test-stock" width="300" height="200">
  <p>Current Price: 25.51</p>
</canvas>

在使用Canvas前,用canvas.getContext来测试浏览器是否支持Canvas:

<!-- HTML代码 -->
<canvas id="test-canvas" width="200" heigth="100">
  <p>你的浏览器不支持Canvas</p>
</canvas>
'use strict';
var canvas = document.getElementById('test-canvas');
if (canvas.getContext) {
  alert('你的浏览器支持Canvas!');
} else {
  alert('你的浏览器不支持Canvas!');
}

getContext('2d')方法让我们拿到一个CanvasRenderingContext2D对象,所有的绘图操作都需要通过这个对象完成。

var ctx = canvas.getContext('2d');

如果需要绘制3D怎么办?HTML5还有一个WebGL规范,允许在Canvas中绘制3D图形:

gl = canvas.getContext("webgl");

本节我们只专注于绘制2D图形。

绘制形状

我们可以在Canvas上绘制各种形状。在绘制前,我们需要先了解一下Canvas的坐标系统:

JavaScript之Canvas_动力节点Java学院整理

Canvas的坐标以左上角为原点,水平向右为X轴,垂直向下为Y轴,以像素为单位,所以每个点都是非负整数。

CanvasRenderingContext2D对象有若干方法来绘制图形:

'use strict';

var
  canvas = document.getElementById('test-shape-canvas'),
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小为200x200的矩形,擦除的意思是把该区域变为透明
ctx.fillStyle = '#dddddd'; // 设置颜色
ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色
// 利用Path绘制复杂路径:
var path=new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveTo(110,75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveTo(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.strokeStyle = '#0000ff';
ctx.stroke(path);

绘制文本

绘制文本就是在指定的位置输出文本,可以设置文本的字体、样式、阴影等,与CSS完全一致:

'use strict';

var
  canvas = document.getElementById('test-text-canvas'),
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = '#666666';
ctx.font = '24px Arial';
ctx.fillStyle = '#333333';
ctx.fillText('带阴影的文字', 20, 40);

Canvas除了能绘制基本的形状和文本,还可以实现动画、缩放、各种滤镜和像素转换等高级操作。如果要实现非常复杂的操作,考虑以下优化方案:

  1. 通过创建一个不可见的Canvas来绘图,然后将最终绘制结果复制到页面的可见Canvas中;
  2. 尽量使用整数坐标而不是浮点数;
  3. 可以创建多个重叠的Canvas绘制不同的层,而不是在一个Canvas中绘制非常复杂的图;
  4. 背景图片如果不变可以直接用<img>标签并放到最底层。
Javascript 相关文章推荐
一些javascript一些题目的解析
Dec 25 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 #jQuery
JS点击缩略图整屏居中放大图片效果
Jul 04 #Javascript
理解Angular的providers给Http添加默认headers
Jul 04 #Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 #Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 #Javascript
Node.js使用gm拼装sprite图片
Jul 04 #Javascript
You might like
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
PHP7 windows支持
2021/03/09 PHP
jquery 图片轮换效果
2010/07/29 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
技术学校毕业生求职信分享
2013/12/02 职场文书
结婚典礼证婚词
2014/01/11 职场文书
三年级音乐教学反思
2014/01/28 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
同学聚会邀请函
2015/01/30 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server