HTML5：Canvas很好的一个Demo_H5之家 - 中国HTML5教程资源分享第一站

> 网页设计 > HTML5 >

HTML5：Canvas很好的一个Demo 2016-12-17 12:34　出处：清屏网　人气：　

利用 HTML5 中的 Canvas ，我们可以做很多很棒的事情，下面来看看我做的一个 Demo

下面就针对这个例子介绍一下 Canvas 的基础使用。

HTML & CSS

当然 Canvas 的绘制需要借助 JavaScript , 首先让我们利用 HTML 和 CSS 将结构层和表现层搭建好，然后我们才可以大展身手。

你可以利用自己高超的 CSS 水平将页面写的十分炫酷，当然我只是简单的利用 CSS 对页面进行了布局，没有写其它用来表现的特性。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="demo05.css"> </head> <body> <article> <canvas width="680" height="320" id="myCanvas"></canvas> <form> <section> <label for="backgroundColor">Select background :</label> <select id="backgroundColor"> <option value="white" selected>White</option> <option value="black">Black</option> </select> </section> <section> <label for="foregroundColor">Select ForegroundColor:</label> <select id="foregroundColor"> <option value="white">White</option> <option value="black" selected>Black</option> </select> </section> <section> <label for="shape">Select shape:</label> <select id="shape"> <option value="circles" selected>Circles</option> <option value="squares">Squares</option> </select> </section> <section> <label for="message">Input text:</label> <input type="text" name="message" id="message" maxlength="48"> </section> <input type="button" value="preview" id="previewButton"> </form> </article> <script src="demo05.js"></script> </body> </html>

其实大部分内容都是关于书写表单控件的，这些代码千篇一律，十分好懂，不过唯一值得注意的是，我在输入控件中加入了 maxlength ，对输入的长度进行了控制，如果输入的字符串太多，绘制文字的时候会出现文字溢出。

上述代码中最珍贵的一行是定义 canvas 元素的那一行，将画布定义为 680px 宽，320px 高。

下面利用 CSS 对页面进行稍微的修改。

*, *::before, *::after { -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } article { width: 680px; height: 320px; margin: 32px auto; text-align: center; } canvas { border: 1px solid #ccc; } form section { margin-bottom: 16px; }

这里，为画布设置了一个边框，是为了更清楚的看到画布的位置。

Canvas 绘图

为了绘制图形，我们首先要得到画布元素，并要求得到它的 2d 绘制上下文。像下面这样。

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");

有了这个 context ，我们就可以肆意的画图了，首先，让我们来画个矩形吧，需要哪些条件呢？事实上，我们只需要指定 x，y 坐标（矩形左上角的坐标）并且设置宽高就可以画出这个图形。

function drawSquare(canvas, context) { var width = Math.floor(Math.random() * 64); var x = Math.floor(Math.random() * canvas.width); var y = Math.floor(Math.random() * canvas.height); context.fillStyle = "lightblue"; context.fillRect(x, y, width, width); }

上面我们使用了随机值，这样我们就可以绘制出不同宽高分布在不同位置的矩形了。利用上面的代码，我们就可以看到下面这样的结果啦。

可以看到，有的矩形已经超出边界了，为什么呢？自己好好想想总会相处答案的吧！

既然已经知道怎么绘制矩形了，那么该怎么绘制圆形呢？我已经迫不及待的去画个圆了，因为我感觉圆比矩形好看，这也就是为什么我们在很多 app 中看到的是圆形头像。

不过，事情进展的不是很顺利，因为我们已经没有类似 fillCircle() 这样的函数可用了。所以我们不得不动笔去画一个，实际上利用 Canvas 你可以画出可以用笔画出的任何效果。在现实生活中，如果你想画画，那么你需要拿起一支笔，但是在画布上，你只需要调用 context 的 beginPath() 方法就可以了，这相当于告诉画布：我要开始画些东西了，你准备好吧！

如果你想在指定的一个点开始你的笔迹，那么你可以使用 moveTo(x, y) 方法，如果你想从画笔的当前位置画线，可以使用 lineTo(x, y) 方法。

好了，下面就让我们开始画圆吧！实际上，还有一个 arc() 方法，可以让我们去画圆，不过在这之前，我们需要调用 beginPath() 方法。

function drawCircle(canvas, context) { var radius = Math.floor(Math.random() * 48); var x = Math.floor(Math.random() * canvas.width); var y = Math.floor(Math.random() * canvas.height); context.beginPath(); context.arc(x, y, radius, 0, Math.PI * 2, true); context.fillStyle = "lightblue"; context.fill(); }