html5 canvas绘制圆形、方形矩形、线段，关于前端开发你必须要懂的APK瘦身知识
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// 绘制圆形
ctx.beginPath();
ctx.arc(70, 40, 35, 0, 2 * Math.PI);
ctx.stroke();
// 绘制方形矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 50, 50);
// 绘制线段
ctx.moveTo(100, 10);
ctx.lineTo(100, 90);
ctx.stroke();
</script>
</body>
</html>这段代码演示了如何在HTML5 canvas上绘制圆形、方形矩形和线段。首先，通过document.getElementById获取canvas元素，然后使用getContext("2d")方法来创建2D绘图上下文。接下来，使用beginPath、arc方法绘制圆形，使用fillStyle和fillRect方法填充方形矩形，最后使用moveTo、lineTo和stroke方法绘制线段。
评论已关闭