1.1 概述
Canvas是HTML5中新增的一个元素,它就像一块画布,可以用JavaScript在上面绘制各种图表、动画、制作游戏等。
在没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制。
2.1 HelloWorld
<canvas>是一个标签,有一个默认的宽度,不需要了解。此时注意,如果我们要设置宽度、高度,必须设置在HTML标签上面,而不能设置在CSS上。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas画布 - HelloWorld</title> <style type="text/css"> canvas { border: 1px solid gray; } </style> </head> <body> <canvas id="myCanvas" width="600" height="300"></canvas> </body> </html>
我们必须使用JavaScript来控制Canvas渲染各种东西:
<script> // 使用DOM方法得到画布 var myCanvas = document.getElementById("myCanvas"); // 使用画布的上下文 var ctx = myCanvas.getContext("2d"); // 画各种东西,用ctx打点调用方法,而不是myCanvas ctx.fillRect(50, 50, 300, 50); </script>
设置后的效果如下图:
上面的例子中,我们就学习了两个API:
myCanvas.getContext("2d");
get表示得到,context是上下文的意思。
canvas起初是空白的。为了展示,首先脚本需要找到渲染上下文,然后在它的上面绘制。<canvas>元素有一个做getContext()的方法,这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数,上下文的格式。
ctx.fillRect(x,y,w,h)
fill是填充的意思,rect是rectangle矩形。填充一个矩形。
注意事项:
(1)、canvas的ctx对象,非常重要所有的绘制都是ctx的方法。
<script> // 使用DOM方法得到画布 var myCanvas = document.getElementById("myCanvas"); //使用画布的上下文 var ctx = myCanvas.getContext("2d"); // 画各种东西,用ctx打点调用方法,而不是myCanvas ctx.fillRect(50, 50, 300, 50); // canvas所有的绘制API都是基于ctx的事情,而不是canvas对象 ctx.fillStyle = "lightgreen"; ctx.beginPath(); ctx.arc(250, 250, 100, 0, Math.PI * 2, true); ctx.fill(); ctx.closePath(); </script>
(2)、canvas的坐标系
(3)、canvas兼容到IE9
评论前必须登录!
注册