简介:初识canvas元素HTML5新增了一个元素canvas,用于绘图使用,其实它的表现和div比较接近(其实他应该属于inline-block),而提供了许多接口,从而轻易的绘制矩形框、圆三角形等关于HTML5新增元素初学者对HTML5的认知 ...
初识canvas元素HTML5新增了一个元素canvas,用于绘图使用,其实它的表现和div比较接近(其实他应该属于inline-block),而提供了许多接口,从而轻易的绘制矩形框、圆三角形等关于HTML5新增元素初学者对HTML5的认知,可能觉得两者之间没多大的区别,无非是增加了点新东西。HTML5为我们带来的真正意义是:我们可以用javascript做更多的事情了;我们可以用javascript实现更好的产品了。比如HTML5就解决了我们头疼的跨域问题、实时通信API、他让我们用网页开发游戏变成可能 绘制矩形框问题:定义样式与定义height与width可以看到,对于canvas来说,还是直接定义宽高的好,不需要用style定义好了,现在我们再来看看绘制矩形这个方法: 1、使用getElementById方法获取绘制对象2、取得上下文getContext("2d"),这都是固定的写法3、指定填充的颜色fillStyle和绘制的颜色strokeStyle,即里面的颜色和边框的颜色4、指定线宽linewidth5、填充/绘制 fillRect/strokeRect 参数为 x,y,width,height6、若是要使其中一块透明,使用clearRect 绘制圆形xy半径开始弧度(我们一般喜欢角度,所以要转换)结束弧度顺时针或者逆时针主要这个开始角度和结束角度我们来研究下, moveTo与lineTo两次moveto 一次moveto 三次moveto |