欢迎访问 如意编程网！
TAG聚合

如意编程网

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

HTML5学习笔记(一)canvas画图

发布时间：2022/11/16 HTML 34 老码农
如意编程网 收集整理的这篇文章主要介绍了 HTML5学习笔记(一)canvas画图 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

 

效果图
HTML5学习笔记(一)canvas画图

 兼容ie的两个js库

<!--[if lte IE 9]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 

画图代码,放在head里

function draw(id) {
var ctx = document.getElementById(id).getContext('2d');

// 画渐变背景设置渐变样式
              var 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);

// 中心点移动到(200,200) 
             ctx.translate(200,200);
for (var i=1;i<6;i++){ 

// 保存当前状态
                ctx.save();

// 设置当前颜色
                ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

for (var j=0;j<i*6;j++)
                { 
// 旋转
                      ctx.rotate(Math.PI*2/(i*6));

// 画圆
                      ctx.beginPath();
                      ctx.arc(0,i*30,8,0,Math.PI*2,true);
                      ctx.fill();
                }

// 返回上次保存状态
                ctx.restore();
              }
        }

 

执行代码

window.onload = function()
        {
            draw("myCanvas");
        }

 

HTML代码

<canvas id="myCanvas" width="400" height="400"></canvas>




总结

以上是如意编程网为你收集整理的HTML5学习笔记(一)canvas画图的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错，欢迎将如意编程网推荐给好友。