网页画图代码：使用HTML5 Canvas绘制图形
以下是一个简单的网页画图代码的例子，使用HTML5的<canvas>元素来创建一个画布：
<!DOCTYPE html>
<html>
<head>
<title>Draw on Webpage</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id='myCanvas' width='500' height='500'></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// 画一个红色的矩形
context.fillStyle = 'red';
context.fillRect(50, 50, 200, 100);
// 画一个蓝色的圆形
context.fillStyle = 'blue';
context.beginPath();
context.arc(300, 300, 50, 0, 2 * Math.PI);
context.fill();
</script>
</body>
</html>
在这个例子中，我们通过JavaScript的getContext('2d')方法获取了一个2D绘图环境，可以使用该环境的方法来绘制图形。
在脚本部分，我们使用了fillRect()方法来绘制一个红色的矩形，参数分别为矩形的起始点坐标和宽高。然后，我们使用fillStyle属性设置为蓝色，使用beginPath()方法开始绘制路径，使用arc()方法绘制一个圆形，参数分别为圆心坐标、半径、起始角度和结束角度，最后使用fill()方法填充颜色。
你可以将这段代码保存为一个HTML文件，然后在浏览器中打开该文件，就可以看到绘制出的矩形和圆形。
原文地址: http://www.cveoy.top/t/topic/fqjk 著作权归作者所有。请勿转载和采集!