了解和简单使用canvas画布

最新推荐文章于 2024-04-08 19:19:50 发布

其实也没有

最新推荐文章于 2024-04-08 19:19:50 发布

阅读量167

点赞数 1

文章标签： canvas js html html5

原文链接：https://developer.mozilla.org/zh-CN/

版权

Canvas

什么是 canvas?

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

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

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

创建一个画布（Canvas）

页面创建一个画布容器

<canvas id="clock" width="650" height="650">
 
</canvas>

canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。[``](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas) 元素有一个叫做 [`getContext()`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/getContext) 的方法，这个方法是用来获得渲染上下文和它的绘画功能

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

绘制矩形

canvas只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）。所有其他类型的图形都是通过一条或者多条路径组合而成的

首先，我们回到矩形的绘制中。canvas提供了三种方法绘制矩形：

[fillRect(x, y, width, height)]

绘制一个填充的矩形
[strokeRect(x, y, width, height)]

绘制一个矩形的边框
[clearRect(x, y, width, height)]

清除指定矩形区域，让清除部分完全透明。

上面提供的方法之中每一个都包含了相同的参数。x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。

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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);

绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

首先，你需要创建路径起始点。
然后你使用画图命令去画出路径。
之后你把路径封闭。
一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

beginPath()

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath()

闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()

通过线条来绘制图形轮廓。
fill()

通过填充路径的内容区域生成实心的图形。

 // 绘制三角形
        ctx.beginPath();
        ctx.moveTo(100,100)
        ctx.lineTo(150,150)
        ctx.lineTo(50,150)
        ctx.closePath();//让最后的移动点回到起始点闭合
        
        ctx.stroke();//用线段绘制前面的路径
        ctx.fill();//填充前面的路径