【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
<!DOCTYPE html>
<html>
<head>
<title>Canvas 初体验</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
// 获取 canvas 元素
var canvas = document.getElementById('myCanvas');
// 获取绘图上下文
var ctx = canvas.getContext('2d');
// 设置填充颜色
ctx.fillStyle = '#FF0000';
// 绘制一个填充矩形
ctx.fillRect(20, 20, 150, 75);
// 设置线条颜色
ctx.strokeStyle = '#0000FF';
// 绘制一个矩形轮廓
ctx.strokeRect(20, 20, 150, 75);
</script>
</body>
</html>这段代码展示了如何在HTML文档中使用<canvas>元素，并通过JavaScript进行绘图。首先，我们通过document.getElementById获取到canvas元素，然后调用getContext('2d')获取绘图上下文。接着，我们设置了填充颜色并使用fillRect方法绘制了一个填充的矩形，同时设置了线条颜色并使用strokeRect方法绘制了一个矩形轮廓。这是Canvas基础用法的简单示例。
评论已关闭