1

一直没有系统的去学习一下canvas,都是在用到的时候一边google一边使用,最近工作上的事情告一段落,就决定跟着MDN 学习一下Canvas

在学习之前,首先了解一下canvas的背景知识。以下内容引用自 MDN

<canvas> 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。<canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。

canvas ,中文翻译为画布,canvas 的出现为Web开发者带了新一轮的 高潮,利用canvas 可以实现出更多好玩的、酷炫的效果。以前依赖flash的效果现在也可以利用canvas来实现了。

canvas 标签 和 其他 HTML 标签 类似,也拥有着许多基本的属性和表现行为。比如idclasscss的规则。canvas标签同时支持 属性widthheightcss 规则中的widthheight。 默认情况下,canvas 的尺寸为300px * 150pxcanvas 元素可以使用CSS来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:即如果CSS的尺寸与初始画布的比例不一致,它会出现扭曲

如果你绘制出来的图像是扭曲的, 尝试在<canvas>的属性中明确规定宽和高,而不是使用CSS。

canvas标签本身不提供绘制功能,所以别指望直接操作canvasDOM对象来实现酷炫的效果。 如果想要去绘制图形制作出各种效果出来,那我们需要操作的是canvas渲染上下文对象

canvas给我的感觉更像是一张白纸,渲染上下文 是我们找到的画师。canvas 向 画师提供了作画的地方,而画师(渲染上下文) 则将美丽的图画绘制在纸张(canvas)上。

canvas 提供了一个方法 getContext 来获取它的 渲染上下文及其的绘制能力。getContext 接受一个参数,用来指示我们希望得到一个什么样的画师。常用的有两种2dwebgl2d 指示我们希望得到一个拥有平面做图能力的画师,而webgl则指示我们希望得到一个能够绘制3d图形的画师。

var canvas = document.getElementById('canvas'); // 获取canvas 节点
var ctx = canvas.getContext('2d'); // 获取canvas节点的渲染上下文

当我们获取到渲染上下文之后,就可以做爱做的事了! 我们所做的一切的操作都建立在渲染上下文 对象上,如果没有这个渲染上下文,那么我们想要绘制哪怕一个简单的矩形都无从谈起。

接下来,我们看一个简单的例子:绘制一个简单的红色矩形,矩形的左上角位于(0,0),宽是150,高是100。

http://codepen.io/YoRolling/p...

未完待续……


Yorolling
239 声望7 粉丝

我亦飘零久!十年来,深恩负尽,死生师友。