HTML5 Canvas 学习

来源:互联网 发布:itunes删除软件 编辑:程序博客网 时间:2024/05/21 12:46

 

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>

 

 

原创粉丝点击