canvas教程

HTML5学习笔记(一)canvas画图

字号+ 作者:H5之家 来源:H5之家 2018-03-12 17:01 我要评论( )

效果图 兼容ie的两个js库 !--[if lte IE 9] script type=

HTML5学习笔记(一)canvas画图

作者: 穆乙

发布时间:2015-06-16 10:32:41

 

效果图

 兼容ie的两个js库

 

画图代码,放在head里

g1 = ctx.createRadialGradient(200,200,0,200,200,200);
g1.addColorStop(0,'rgb(255,255,255)');
g1.addColorStop(1,'rgb(220,220,220)');
ctx.fillStyle = g1;
ctx.fillRect(0,0,400,400);

ctx.translate(200,200);
ctx.save();

ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

ctx.rotate(Math.PI*2/(i*6));

ctx.beginPath();
ctx.arc(0,i*30,8,0,Math.PI*2,ctx.restore();
}
}

 

执行代码

window.onload =




来源:

推荐:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 关于 onpropertychange 和 oninput 使用

    关于 onpropertychange 和 oninput 使用

    2018-03-29 09:02

  • 在 mpvue 使用 echarts 小程序组件

    在 mpvue 使用 echarts 小程序组件

    2018-03-12 15:00

  • 包邮 HTML5游戏开发案例教程 HTML5跨平台游戏开发教程书籍 Canva

    包邮 HTML5游戏开发案例教程 HTML5跨平台游戏开发教程书籍 Canva

    2018-03-12 15:00

  • 基于HTML5 Canvas的客户端图表技术研究

    基于HTML5 Canvas的客户端图表技术研究

    2018-03-12 13:08

网友点评