大佬教程收集整理的这篇文章主要介绍了html5之canvas,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
canvas是html5出现的新标签,主要用来画图,看见网上能用来实现各种图形,所以感觉很好玩,就学习了一下。
canvas绘制图形有两种方法:
context.fill() //填充
context.stroke() //绘制边框
在绘制图形前要设置好图形样式,也有两种方法:
context.fillStyle() //填充的样式
context.strokeStyle() //边框样式
下面就开始绘制各种图形
绘制矩形
context.fillRect(x,y,width,height)
context.fillRect(x,height)
x : 矩形的起点横坐标
y : 矩形的起点纵坐标
width : 矩形的宽度
function draw(){ var canvas = document.getElementById('chen'),context = canvas.getContext('2d'); canvas.width = 100; canvas.height = 100; context.fillStyle = 'red'; //发现要先设置填充颜色 context.fillRect(0,100,100); context.strokeRect(0,100); } draw();
圆 context.arc(x,radius,starAngle,endAngle,anticlockwose) radius : 半径
以上是大佬教程为你收集整理的html5之canvas全部内容,希望文章能够帮你解决html5之canvas所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。