zoukankan      html  css  js  c++  java
  • 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>




  • 相关阅读:
    poj1088 经典dp
    poj2301
    poj1050(nyoj104 zoj1074)dp问题
    hdu1003
    poj1001(高精度)
    图的深度优先遍历DFS
    jquery中attr和prop的区别
    Apache 配置域名入口路径
    关于启动定时器和取消定时器的问题
    Web攻防之XSS,CSRF,SQL注入
  • 原文地址:https://www.cnblogs.com/pigtail/p/2397966.html
Copyright © 2011-2022 走看看