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

HTML <canvas> 学习笔记

2015-06-11 17:39 435 查看

Professional JavaScript for Web Developers P552

Basic Usage

　　The <canvas> element requires at least its width and height attributes to be set in order to indicate the size of the drawing to be created. Any content appearing between the opening and closing tags is fallback data that is displayed only if the <canvas> element isn't supported.

　　To begin with drawing on a canvas, you need to retrieve a drawing context. A reference to a drawing context is retrieved using the getContext() method and passing in the name of the context. For example, passing "2d" retrieves a 2D context object:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var drawing = document.getElementById("drawing");

// make sure <canvas> is complet supported
if (drawing.getContext) {
var context = drawing.getContext("2d");

// draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);

// draw a blue rectangle that's semi-transparent
context.fillStyle = "rgba(0, 0, 255, 0.5)";
context.fillRect(30, 30, 50, 50);

// clear a rectangle that overlaps both of the previous rectangles
context.clearRect(40, 40, 10, 10);
}
}
</script>
</head>
<body>
<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>
</body>
</html>

View Code

Drawing Paths

　　Paths allow you to create complex shapes and lines. To start creating a path, you must first call beginPath() to indicate that a new path has begun. After that, the following methods can be called to create the path:

arc(x, y, radius, startAngle, endAngle, counterclockwise)

arcTo(x1, y1, x2, y2, radius)

lineTo(x, y)

moveTo(x, y)

rect(x, y, width, height)

利用HTML <canvas>做的弹球，[点击这里]，具体细节还需要更改~

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

标签：

相关文章推荐

新的分享

章节导航