Canvas 很好的一个 Demo

      2020-05-23 18:55      HTML5

利用 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();}

值得一提的是, arc() 方法中第四和第五个参数使用的都是弧度值,不过我们一般喜欢使用角度,比如 360 度,而不是 2 PI,所以我们可以写一个转换函数,然后你就可以尽情的使用熟悉的角度值了。

function degreesToRadians(degrees) {return (degrees * Math.PI) / 180;}

下面,你就可以画出下面这样的效果。