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 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
JavaScript实现商品评价五星好评
Nov 30 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
环保建议书300字
2014/05/14 职场文书
机电一体化专业求职信
2014/07/22 职场文书
小学生毕业评语
2014/12/26 职场文书
新兵入伍决心书
2015/09/22 职场文书
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python
数据设计之权限的实现
2022/08/05 MySQL