HTML 画布绘图
使用 JavaScript 在画布上绘图
HTML 画布上的所有绘图都必须使用 JavaScript 完成:
实例
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
亲自试一试 »
第1步: 找到 Canvas 画布元素
首先，必须找到 <canvas> 元素。
通过使用HTML DOM的 getElementById() 方法完成:
var canvas = document.getElementById("myCanvas");
第1步: 创建绘图对象
其次，画布需要一个绘图对象。
使用一个内置的HTML对象 getContext()，它具有用于绘图的属性和方法:
var ctx = canvas.getContext("2d");
Step 3: 在画布上绘图
最后，你可以在在画布上绘图。
将图形对象的填充样式设置为红色:
ctx.fillStyle = "#FF0000";
fillStyle 属性可以是CSS颜色、渐变色或图案。默认填充样式为黑色。
fillRect(x,y,width,height) 方法在画布上绘制一个用填充样式填充的矩形:
ctx.fillRect(0, 0, 150, 75);
