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 相关文章推荐
通过jQuery源码学习javascript(二)
Dec 27 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
vue接口请求加密实例
Aug 11 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 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
基于递归实现的php树形菜单代码
2014/11/19 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
php中动态变量用法实例
2015/06/10 PHP
php中this关键字用法分析
2016/12/07 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
九步学会Python装饰器
2015/05/09 Python
python3中str(字符串)的使用教程
2017/03/23 Python
python单例模式的多种实现方法
2019/07/26 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
python如何代码集体右移
2020/07/20 Python
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
最新大学生自我评价
2013/09/24 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
高一新生军训方案
2014/05/12 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
同意转租证明
2015/06/24 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
Golang表示枚举类型的详细讲解
2021/09/04 Golang
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis