82canvas党徽和五角星_html-js-css

概述说明：左边是中国国民党的党徽，右边是中国共~产~党(提示说是违规内容)的五角星，都是用HTML5里面的canvas写的。```html:run<!doctype html><html><head> <meta charset="UTF-8"> <title>党徽和五角星</title></head><body><canvas id="canvas" width="450" height @H_404_4@

说明：左边是中国国民党的党徽，右边是中国共~产~党(提示说是违规内容)的五角星，都是用HTML5里面的canvas写的。```HTML:run<!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,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,105,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();</script></body></HTML>```

@H_404_4@ @H_404_4@ @H_404_4@ 总结

以上是内存溢出为你收集整理的82canvas党徽和五角星全部内容，希望文章能够帮你解决82canvas党徽和五角星所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1072839.html