首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

一步步学习HTML5 - Canvas 教授教养

2012-08-10 
一步步学习HTML5 - Canvas 教学第一步,定义和用法?? 我们先来简单的介绍一下 Canvas的概念?? canvas 标

一步步学习HTML5 - Canvas 教学

第一步,定义和用法

?? 我们先来简单的介绍一下 Canvas的概念

?? <canvas> 标签定义图形,比如图表和其他图像。

?? <canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

?? 再简单的说 canvas 标签就是在web页面上面画图,相当于java swing的draw2d,不过要区分清楚,这个可是在web页面上..

第二步、canvas的基本方法介绍

????????? fillStyle:[value];填充颜色,这个值可以是颜色的值,可以是16进制值,也可以是rgb或rgba色彩;

????????? strokeStyle:[value];线(边框)颜色,取值同上;

????????? lineWidth:[value];线宽度,是一个数值;

????????? fillRect:矩形填充方法;

????????? strokeRect:矩形画线方法。

????????? 我们就用这些属性绘制一个新的矩形吧。

?第三步、通过canvas画图

function draw() { canvas = document.getElementById("canvas"); if (canvas.getContext) { //检测浏览器是否兼容 ctx = canvas.getContext("2d"); //你的canvas代码在这里 return ctx;}return null;}?

矩形

热点排行