canvas教程

HTML5:Canvas很好的一个Demo

字号+ 作者:H5之家 来源:H5之家 2016-12-18 15:01 我要评论( )

利用 HTML5 中的 Canvas ,我们可以做很多很棒的事情,下面来看看我做的一个 Demo 下面就针对这个例子介绍一下 Canvas 的基础使用。 HTML CSS 当然 Canvas 的绘

> 网页设计 > 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(); }

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • android入门教程Andorid绘图Canvas

    android入门教程Andorid绘图Canvas

    2016-12-18 15:02

  • html5 Canvas画图:1像素线条模糊问题

    html5 Canvas画图:1像素线条模糊问题

    2016-12-16 17:02

  • OpenCanvas v6.0.1.0 破解版 (32位/64位)

    OpenCanvas v6.0.1.0 破解版 (32位/64位)

    2016-12-16 17:01

  • canvas 动态画线

    canvas 动态画线

    2016-12-16 11:02

网友点评
3