Canvas 绘图上下文

<canvas> 元素本身是没有绘图能力的,所有的绘制工作必须在 JavaScript 内部完成

例如一个画布

<canvas id="canvas-1" style="border:1px solid green"></canvas>

我们必须先通过 document.getElementById("canvas-1") 来获得这个 <canvas> 元素

渲染上下文

<canvas> 起初是空白的。为了展示,首先脚本需要找到渲染上下文,然后在它的上面绘制

怎么理解这个渲染上下文呢?

就像一块画板,它就静静地躺在哪里,没有人,就不能画画,所以这个渲染上下文就相当于现实中绘画的人

我们都知道现实总绘画有很多流派,比如油画,素描,写实....

<canvas> 的世界,也有两大流派,一个是 2d 就是平面绘图,一个是 webgl 也就是 3D 立体绘图

因为 webgl 还未完全被主流的浏览器所支持,所以我们一般使用 2d 绘图

获取 2d 渲染上下文

<canvas> 元素有一个叫做 getContext() 的方法

canvas.getContext(contextType, contextAttributes);

这个方法是用来获得渲染上下文和它的绘画功能

参数 说明
contextType 上下文类型,一个字符串,值可以是 2dwebgl
contextAttributes 创建上下文时设置属性,一个字典对象,默认为空即可

对于 2d 图像而言,可以使用下面的代码获取渲染上下文

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

ctx 现在 CanvasRenderingContext2D 的一个实例

现在已经获取到了 2D 画布的渲染上下文,可以使用它画你想画的了

对了,接下来的教程,渲染上下文(ctx) 就是表示使用 canvas.getContext('2d');

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.