zoukankan      html  css  js  c++  java
  • canvas学习之初级运用

    <html>
    <head>
    <meta charset=utf-8>
    <title>绘制简单图形</title>
    <style type="text/css">
    canvas{
    border: 1px solid #aaa;
    display: block;
    margin: 50px auto;
    }
    </style>
    </head>
    <body>
    <canvas id="canvas"></canvas>
    </body>
    <script>
    var c = document.querySelector("#canvas");
    c.width = 800;
    c.height = 800;
    //画布
    var context = c.getContext("2d");
    //五角星的绘制
    context.fillStyle = "black";
    context.fillRect(0,0,800,800);
    for(var i = 0;i < 200;i++)
    {
    context.save();
    var r = Math.random()*10+10;
    var x = Math.random()*c.width;
    var y = Math.random()*c.height;
    var rot = Math.random()*360;
    drawstar(context,r/2,r,x,y,rot);
    context.restore();
    }
    function drawstar(cxt,r,R,x,y,rot)
    {
    context.beginPath();
    for( var i = 0; i <5 ;i++)
    {
    cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
    -Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
    cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
    -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);

    }
    cxt.closePath();
    cxt.lineWidth = 3;
    cxt.fillStyle = "yellow";
    cxt.stroke
    cxt.lineJoin = "round";
    cxt.fill();
    cxt.stroke();
    }
    </script>
    </html>

  • 相关阅读:
    5、流程控制
    4、字典和元祖
    3、列表操作
    2、字符串和数据类型
    1.标识符练习
    使用xpath提取页面所有a标签的href属性值
    网页提取所有邮箱
    正则表达式
    提取包含QQ的文本为QQ邮箱
    python继承小demo
  • 原文地址:https://www.cnblogs.com/angle-xiu/p/11197670.html
Copyright © 2011-2022 走看看