小代码 个人ｌｏｇｏ ａｒｃ版本
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小代码 个人ｌｏｇｏ ａｒｃ版本相关的知识，希望对你有一定的参考价值。
／／ ／／ ／／http://www.365mini.com/diy.php?f=html5-canvas-circle-demo-1 ／／ 以下代码 在线运行＋本地支持
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Canvas绘制弧线入门示例</title> </head> <body> <!-- 添加canvas标签，并加上红色边框以便于在页面上查看 --> <canvas id="myCanvas" width="50px" height="50px" style="border: 1px solid red;"> </canvas> <script type="text/javascript"> <!-- 1 --> var canvas = document.getElementById("myCanvas"); if(canvas.getContext){ var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.strokeStyle = "blue"; var circle = { x : 10, y : 40, r : 10 }; ctx.arc(circle.x, circle.y, circle.r, -Math.PI*3/ 4, Math.PI / 2, false); ctx.stroke(); } <!-- 2 --> var canvas = document.getElementById("myCanvas"); if(canvas.getContext){ var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.strokeStyle = "blue"; var circle = { x : 25, y : 26, r : 10 };ctx.arc(circle.x, circle.y, circle.r, -Math.PI/2, Math.PI/4, true); ctx.stroke(); } <!-- 3--> var canvas = document.getElementById("myCanvas"); if(canvas.getContext){ var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.strokeStyle = "red"; var circle = { x : 30, y : 35, r : 10 }; ctx.arc(circle.x, circle.y, circle.r, -Math.PI*3/ 4, Math.PI / 2, false); ctx.stroke(); } <!-- 4 --> var canvas = document.getElementById("myCanvas"); if(canvas.getContext){ var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.strokeStyle = "red"; var circle = { x :45, y : 23, r : 10 };ctx.arc(circle.x, circle.y, circle.r, -Math.PI/2, Math.PI/4, true); ctx.stroke(); } </script> </body> </html>
以上是关于小代码 个人ｌｏｇｏ ａｒｃ版本的主要内容，如果未能解决你的问题，请参考以下文章