zoukankan      html  css  js  c++  java
  • 如何使用canvas画星星

    利用canvas画星星的代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>画星星</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <script type="text/javascript">
    window.onload=function(){
    var canvas=document.getElementById('canvas');
    canvas.width=600;
    canvas.height=600;
    canvas.style.border="1px solid red";
    if (canvas.getContext("2d")) {
    var context=canvas.getContext("2d");

    drawStar(context,200,100,300,300);

    }else{
    alert("你的浏览器版本过低,不支持canvas");
    }

    }

    function drawStar(context,rx,ry,x,y){
    context.beginPath();

    context.strokeStyle="red";
    context.lineWidth="5";
    for (var i=0;i<5;i++) {
    context.lineTo(Math.cos((18+i*72)/180*Math.PI)*rx+x,-Math.sin((18+i*72)/180*Math.PI)*rx+x);
    context.lineTo(Math.cos((54+i*72)/180*Math.PI)*ry+y,-Math.sin((54+i*72)/180*Math.PI)*100+y);
    };
    context.closePath();
    context.stroke();

    }
    </script>
    </head>
    <body>
    <canvas id="canvas"></canvas>
    </body>
    </html>

  • 相关阅读:
    62. Unique Paths
    24. Swap Nodes in Pairs
    83. Remove Duplicates from Sorted List
    21. Merge Two Sorted Lists
    141. Linked List Cycle
    268. Missing Number
    191. Number of 1 Bits
    231. Power of Two
    9. Palindrome Number
    88. Merge Sorted Array
  • 原文地址:https://www.cnblogs.com/jackzzx/p/4437734.html
Copyright © 2011-2022 走看看