最新的Web开发教程
 

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");

第2步:创建一个图形对象

其次,你需要为画布图形对象。

所述getContext()是一个内置的HTML对象,与图纸的属性和方法:

var ctx = canvas.getContext("2d");

步骤3:画在画布上

最后,你可以画在画布上。

将图形对象,以红色的填充样式:

ctx.fillStyle = "#FF0000";

FillStyle属性可以是CSS颜色,渐变或图案。 默认填充样式是黑色的。

fillRect( x,y,width,height )方法绘制一个矩形,填充填充样式,在画布上:

ctx.fillRect(0,0,150,75);