如何使用Canvas及动画实现-白红宇

如何使用Canvas及动画实现

阅读量：7114 次

发布时间：2019-06-28

本文共 2108 字，大约阅读时间需要 7 分钟。

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【如何使用Canvas及动画实现】

如何使用Canvas及其动画实现

什么是Canvas?

Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。

Canvas 对象表示一个 HTML 画布元素–。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

定义和用法

首先，在HTML元素中定义一个canvas标签

获取CANVAS对象及渲染上下文

var canvas = document.getElementById('tutorial');

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

基本形状

fillRect(x, y, width, height)

绘制一个填充的矩形

strokeRect(x, y, width, height)

绘制一个矩形的边框

clearRect(x, y, width, height)

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

function draw() {

var canvas = document.getElementById('canvas');

if (canvas.getContext) {

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()

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

移动笔触

一个非常有用的函数，而这个函数实际上并不能画出任何东西，也是上面所描述的路径列表的一部分，这个函数就是moveTo()。或者你可以想象一下在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。

moveTo(x, y)

将笔触移动到指定的坐标x以及y上。

function draw() {

var canvas = document.getElementById('canvas');

if (canvas.getContext){

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

ctx.beginPath();ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制ctx.moveTo(110,75);ctx.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)ctx.moveTo(65,65);ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼ctx.moveTo(95,65);ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼ctx.stroke();

}