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>




  • 相关阅读:
    JVM学习笔记(一)------基本结构
    基于 Android 的 3D 视频样本代码
    Objective-C语法之代码块(block)的使用
    javabean总结
    oncopy和onpaste
    Linux/UNIX之信号(2)
    Html的空格显示
    硬盘的读写原理
    IntentFilter
    MyEclipse配置启动多个Tomcat
  • 原文地址:https://www.cnblogs.com/pigtail/p/2397966.html
Copyright © 2011-2022 走看看