热门关键字:
jquery > jquery教程 > jquery教程 > canvas教程-canvas的基本使用

canvas教程-canvas的基本使用

317
作者:管理员
发布时间:2021/8/24 18:31:42
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5313
  一直以来,web上的动画都是flash实现的,例如,广告、游戏等。


  flash是有缺点的,例如我们需要安装Adobe flash player插件,并且漏洞多、重量比较大、卡顿、不流畅等。


  因此,HTML5推出了新的画布标签—canvas。


  canvas是一个轻量级的画布,我们使用canvas进行JavaScript编程,不需要增加额外的插件,性能也很好,不卡顿,在手机中也很流畅。


  canvas彻底颠覆了flash的主导地位。无论是广告、游戏,都可以用canvas实现。


  canvas的本质:利用代码在浏览器上进行画画。


  canvas有2个属性,分别是width、height,可以设置画布的宽度、高度。


  注意事项:画布的宽和高不要用css样式去设置,如果使用css样式设置,画布就会失真、变形。


  canvas标签里的文字是用来提示低版本的浏览器(IE6、IE7、IE8),所以低版本浏览器可以看到标签内容。


  高版本的浏览器是看不到canvas标签里的文字的。


  getContext方法:获取上下文。


  fillStyle属性:设置颜色(填充样式)。


  fillRect方法:绘制图形(填充矩形)。


  fillRect有四个属性,分别是x坐标、y坐标、绘制的宽度、绘制的高度。


  从上面的代码可以看出,ctx获取了2d的属性和方法,所以ctx变成了对象,也能使用链式语法。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐