No.36 HTML5 Canvas

Posted 2021-04-29 Web全栈开发攻城狮

什么是 canvas?

html5 <canvas> 元素用于图形的绘制，通过脚本 (通常是javascript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

注：本来想写完JavaScript再写Canvas的，有同学问到了，所以就先写出来。没有js基础的可以先跳过，学过js基础再回头看Canvas。

创建一个画布（Canvas）

注意: 默认情况下 <canvas> 元素没有边框和内容。

• HTML：宽300, 高200

<canvas id="myCanvas" width="300" height="200" 

style="border: 1px solid black"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

提示:可以在HTML页面中使用多个 <canvas> 元素.

使用 JavaScript 来绘制图像

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

• JavaScript:

1.找到 <canvas> 元素:

var c=document.getElementById("myCanvas");

2.创建 context 对象：

    getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

var ctx=c.getContext("2d");

3.设置fillStyle属性可以是CSS颜色，渐变，或图案。

    fillStyle 默认设置是#000000（黑色）。

ctx.fillStyle="red";

    fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

ctx.fillRect(100,50,100,100);

效果图：

Canvas 坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

上面的 fillRect 方法拥有参数 (100,50,100,100)。

意思是：在画布上绘制 100x100 的矩形，从坐标点(100,50)开始 。

坐标示意图：

Canvas - 路径

使用以下两种方法，在Canvas上画线：

• moveTo(x,y) 定义线条开始坐标

• lineTo(x,y) 定义线条结束坐标

示例：

HTML：宽100, 高100

<canvas id="myCanvas" width="100" height="100" 

style="border: 1px solid black"></canvas>

JavaScript:

定义开始坐标(50,50), 和结束坐标 (100,100)。然后使用 stroke() 方法来绘制线条:

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.moveTo(50,50);

ctx.lineTo(100,100);

ctx.stroke();

效果图：

Canvas还有很多属性和方法，会在后面的推文中介绍。谢谢