怎么利用HTML5的canvas绘制党徽和五角星

2019-09-10 郑州网站建设  

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>党徽和五角星</title>

</head>

<body>

<canvas id="canvas" width="450" height="450">

    您的浏览器不支持canvas标签,无法看到党徽

</canvas>

<canvas id="canvas1" width="450" height="450">

    您的浏览器不支持canvas标签,无法看到五角星

</canvas>

<script>

    var canvas = document.getElementById("canvas");

    var context = canvas.getContext("2d");

    context.beginPath();

    context.arc(215, 215, 200, 0, 360);

    context.fillStyle = "#030d48";

    context.strokeStyle = "grey";

    context.lineWidth = "10";

    context.stroke();

    context.fill();

    context.closePath();

    context.beginPath();

    for (var i = 0; i < 12; i++) {

        context.lineTo(Math.cos((i * 30) / 180 * Math.PI) * 200 + 215,

                Math.sin((i * 30) / 180 * Math.PI) * 200 + 215);

        context.lineTo(Math.cos((i * 30 + 15) / 180 * Math.PI) * 105 + 215,

                Math.sin((i * 30 + 15) / 180 * Math.PI) * 105 + 215);

    }

    context.fillStyle = "#ffffff";

    context.fill();

    context.closePath();

    context.beginPath();

    context.arc(215, 215, 105, 0, 360);

    context.strokeStyle = "#030d48";

    context.lineWidth = "10";

    context.stroke();

    context.closePath();

/*以上党徽,以下五角星*/

    var canvas1 = document.getElementById("canvas1");

    var context1 = canvas1.getContext("2d");

    context1.beginPath();

    context1.rotate(18*Math.PI/180);

    for (i = 0; i < 5; i++) {

        context1.lineTo(Math.cos((i * 72+36) / 180 * Math.PI) * 200 + 250,

                Math.sin((i * 72+36) / 180 * Math.PI) * 200 + 150);

        context1.lineTo(Math.cos((i * 72+72) / 180 * Math.PI) * 75 + 250,

                Math.sin((i * 72+72) / 180 * Math.PI) * 75 + 150);

    }

    context1.fillStyle = "#ff0000";

    context1.fill();

    context1.closePath();


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1807.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • Doctype
  • !
  • htm
  • HTML5canvas