Canvas学习札记(一)-基础知识_H5之家 - 中国HTML5教程资源分享第一站

Canvas学习笔记(一)--基础知识

1、<canvas>元素

id：不是<canvas>元素专享，和标准的html标签一样，都可以为元素指定id；

width：元素宽度，默认为300px。可以通过dom和css进行设置；

height：元素高度，默认为150px。可以通过dom和css进行设置；

canvas默认是全透明的，但是可以像图片一样指定样式（边距、边框、背景等），指定的样式不会对图像产生影响。

为了兼容旧版本浏览器，canvas提供了替换内容，例如：

<canvas> current stock price: $3.15 +0.15 </canvas> <canvas> <img src="images/clock.png"/> </canvas>

2 、渲染上下文

canvas初始化是空白的，要在上面画图首先需要渲染上下文，

//通过id获取canvas元素对象 var canvas = document.getElementById('canvas_test'); //通过canvas获取上下文 //注：2d是目前唯一的选择 var context = canvas.getContext('2d'); ?

? 3 、简单的例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> .wraper { position: relative; border: 1px solid orange; } </style> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('test'); if(canvas.getContext){ var context = canvas.getContext('2d'); context.fillStyle = "rgba(200,0,0,1)"; context.fillRect(10,10,50,50); context.fillStyle = "rgba(0,0,200,0.3)"; context.fillRect(30,30,70,70); } } </script> </head> <body> <canvas></canvas> </body> </html> ?

运行后的效果：