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

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的坐标系统：

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>标签并放到最底层。
赞 (0)

相关推荐

  • JS实现简单的Canvas画图实例

    定义变量:[javascript] 复制代码 代码如下: var startX; var startY; var endX; var endY; var radius; var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var select = document.getElementsByTagName("select"

  • Javascript和HTML5利用canvas构建Web五子棋游戏实现算法

    Javascript和HTML5利用canvas构建Web五子棋游戏实现算法

    这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战. 五子棋棋盘落子点对应的二维数组.数组的元素对应落子点.比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子: 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的. 判断五子棋赢棋算法 下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现. 其中函数的参数xx.yy为数组下标,chess数组实现五

  • js判读浏览器是否支持html5的canvas的代码

    复制代码 代码如下: <canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> va

  • js生成缩略图后上传并利用canvas重绘

    一般在处理图片上传时,通常的逻辑都是将源图片上传到服务器端,再由服务器端的语言进行缩放大小的操作. 此种模式一般可以满足大部分的需求,但当我们所需要的图片仅仅是一个符合规定大小的源图片的缩略图,再使用此种模式,将是一种浪费服务端资源以及带宽的方式,故我们考虑在浏览器端生成小图后再进行上传操作. //以下为源代码 复制代码 代码如下: function drawCanvasImage(obj,width, callback){ var $canvas = $('<canvas></canv

  • angularJS结合canvas画图例子

    这里给大家分享一个angularJS结合canvas画图例子,效果非常不错,赞一个先. 复制代码 代码如下: <!DOCTYPE html> <html ng-app="APP"> <head>     <meta charset="UTF-8">   <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js&

  • js+html5绘制图片到canvas的方法

    本文实例讲述了js+html5绘制图片到canvas的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not suppor

  • 使用JavaScript+canvas实现图片裁剪

    canvas是一个可以让我们使用脚本绘图的标签,它提供了一系列完整的属性和方法.我们可以借此来实现图形绘制,图像处理甚至实现简单的动画和游戏制作. canvas标签只有两个属性:width和height,用来设定画布的宽和高,如果没有通过标签属性或者脚本来设置,默认为300*150; 好了,canvas的介绍就先到这里,下面我们来看看javascript结合canvas实现图片的裁剪代码: 复制代码 代码如下: var selectObj = null; function ImageCrop(c

  • javascript基于HTML5 canvas制作画箭头组件

    javascript基于HTML5 canvas制作画箭头组件

    样例: 废话少说,直接上代码: arrow.js /** * 实现两点间画箭头的功能 * @author mapleque@163.com * @version 1.0 * @date 2013.05.23 */ ;(function(window,document){ if (window.mapleque==undefined) window.mapleque={}; if (window.mapleque.arrow!=undefined) return; /** * 组件对外接口 */

  • js+html5实现canvas绘制圆形图案的方法

    本文实例讲述了js+html5实现canvas绘制圆形图案的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not sup

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

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

    Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等. 没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互.有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制. 一个Canvas定义了一个指定尺寸的矩形框,在这个范围内我们可以随意绘制: <canvas id="test-canvas" width="300" heig

  • JavaScript之DOM_动力节点Java学院整理

    由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM. 始终记住DOM是一个树形结构.操作一个DOM节点实际上就是这么几个操作: 更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容: 遍历:遍历该DOM节点下的子节点,以便进行进一步操作: 添加:在该DOM节点下新增一个子节点,相当于动态增加了一个HTML节点: 删除:将该节点从HTML中删除,相当于删掉了该DOM节点的内容以及它包含的所有子节点. 在操作一个DO

  • JavaScript之json_动力节点Java学院整理

    JSON是JavaScript Object Notation的缩写,它是一种数据交换格式. 在JSON出现之前,大家一直用XML来传递数据.因为XML是一种纯文本格式,所以它适合在网络上交换数据.XML本身不算复杂,但是,加上DTD.XSD.XPath.XSLT等一大堆复杂的规范以后,任何正常的软件开发人员碰到XML都会感觉头大了,最后大家发现,即使你努力钻研几个月,也未必搞得清楚XML的规范. 终于,在2002年的一天,道格拉斯·克罗克福特(Douglas Crockford)同学为了拯救深

  • JavaScript简介_动力节点Java学院整理

    JavaScript简介_动力节点Java学院整理

    JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言.使用它的目的是与HTML超文本标记语言实现在一个Web页面中连接多个对象,与Web客户交互作用.javascript的出现使得网页和用户之间实现了一种实时性的,动态性的,交互性的关系,使网页包含更多活跃的元素和更加精彩的内容. 同时javascript短小精悍,在客户机上执行,大大提高了网页的浏览速度和交互能力. 再者,我们看一下javascript的特点: 1,JavaScript是

  • JavaScript标准对象_动力节点Java学院整理

    在JavaScript的世界里,一切都是对象. 但是某些对象还是和其他对象不太一样.为了区分对象的类型,我们用typeof操作符获取对象的类型,它总是返回一个字符串: typeof 123; // 'number' typeof NaN; // 'number' typeof 'str'; // 'string' typeof true; // 'boolean' typeof undefined; // 'undefined' typeof Math.abs; // 'function' ty

  • JavaScript闭包_动力节点Java学院整理

    函数作为返回值 高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回. 我们来实现一个对Array的求和.通常情况下,求和的函数是这样定义的: function sum(arr) { return arr.reduce(function (x, y) { return x + y; }); } sum([1, 2, 3, 4, 5]); // 15 但是,如果不需要立刻求和,而是在后面的代码中,根据需要再计算怎么办?可以不返回求和的结果,而是返回求和的函数! function lazy

  • JavaScript创建对象_动力节点Java学院整理

    JavaScript创建对象_动力节点Java学院整理

    JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象. 当我们用obj.xxx访问一个对象的属性时,JavaScript引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找,如果还没有找到,就一直上溯到Object.prototype对象,最后,如果还没有找到,就只能返回undefined. 例如,创建一个Array对象: var arr = [1, 2, 3]; 其原型链是: arr ----> Array.prototype ----> Object.proto

  • JavaScript之underscore_动力节点Java学院整理

    JavaScript是函数式编程语言,支持高阶函数和闭包.函数式编程非常强大,可以写出非常简洁的代码.例如Array的map()和filter()方法: 'use strict'; var a1 = [1, 4, 9, 16]; var a2 = a1.map(Math.sqrt); // [1, 2, 3, 4] var a3 = a2.filter((x) => { return x % 2 === 0; }); // [2, 4] 现在问题来了,Array有map()和filter()方法

  • JavaScript之Date_动力节点Java学院整理

    在JavaScript中,Date对象用来表示日期和时间. 要获取系统当前时间,用: var now = new Date(); now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST) now.getFullYear(); // 2015, 年份 now.getMonth(); // 5, 月份,注意月份范围是0~11,5表示六月 now.getDate(); // 24, 表示24号 now.getDay(); // 3, 表示星期三 now.getHo

  • JavaScript之iterable_动力节点Java学院整理

    遍历Array可以采用下标循环,遍历Map和Set就无法使用下标.为了统一集合类型,ES6标准引入了新的iterable类型,Array.Map和Set都属于iterable类型. 具有iterable类型的集合可以通过新的for ... of循环来遍历. for ... of循环是ES6引入的新的语法,请测试你的浏览器是否支持: 'use strict'; var a = [1, 2, 3]; for (var x of a) { } alert('你的浏览器支持for ... of'); 用

随机推荐