W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML Canvas 绘制



用JavaScript在画布上绘制

HTML画布上的所有绘图必须使用JavaScript完成:

Example

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
尝试一下 »

步骤1:找到画布元素

首先,您必须找到 <canvas> 元素。

这是通过使用 HTML DOM 方法 getElementById() 完成的:

var canvas = document.getElementById("myCanvas");

步骤2:创建绘图对象

其次,您需要画布对象。

getContext() 是一个内置的HTML对象,具有用于绘制的属性和方法:

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

步骤3:在画布上绘制

最后,您可以在画布上绘制。

将绘图对象的填充样式设置为红色:

ctx.fillStyle = "#FF0000";

fillStyle 属性可以是CSS颜色,渐变或模式。 默认的 fillStyle 是黑色的。

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

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