html5 canvas绘制圆形、方形矩形、线段、图片等各种图形
<!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, 50);
ctx.lineWidth = 3;
ctx.strokeStyle = "#0000FF";
ctx.stroke();
// 绘制图片
var img = new Image();
img.src = 'path_to_image.jpg'; // 替换为图片路径
img.onload = function() {
ctx.drawImage(img, 20, 60, 80, 80);
}
</script>
</body>
</html>在这个例子中，我们首先获取了页面上的<canvas>元素，并创建了一个2D绘图上下文。接着，我们使用beginPath()和arc()方法绘制了一个圆形，使用fillStyle和fillRect()方法绘制了一个填充的方形，使用moveTo()和lineTo()方法绘制了一条线段，并使用drawImage()方法加载并绘制了一张图片。这些基本的绘图方法是HTML5 Canvas API的核心组成部分。
评论已关闭