您的位置：首页 > Web前端 > HTML5

HTML5 Canvas 学习

2010-08-14 14:42 330 查看

Canvas简介

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建一个简单的canvas

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type='text/css'>

canvas {

border: 1px solid #333;

}

</style>

<script type='text/javascript'>

function draw() {

var canvas = $.ele('canvas');

if (canvas.getContext) {

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

ctx.fillRect(25, 25, 100, 100);

ctx.clearRect(45, 45, 60, 60);

ctx.strokeRect(50, 50, 50, 50);

}

}

window.onload = function() {

draw();

};

</script>

</head>

<body>

<canvas id='canvas' width='150' height='150'>

您的浏览器暂不支持Canvas标签，您可以下载 <a href='http://www.google.cn/chrome' target='_blank'>Chrome</a> 来查看效果!

</canvas>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航