canvas这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8>
<title>Document</title>
<style>
#myCanvas{ background: #CCC; }
* { margin:0; padding: 0;}
html,body{ width: 100%; height: 100%;}
canvas{ display: block;}
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="800" ></canvas>
</body>
</html>第一部分：基本概念等
- 创建canvas画布
注意：① width、height，这两个属性定义了canvas元素宽和高，从而相应的定义了2D渲染上下文的尺寸。
② 2D渲染上下文的尺寸默认值：宽300像素、高150像素 - 坐标
左上角为原点（0,0）
右移：x坐标增加
下移：y坐标增加 - 2D渲染上下文（真正绘制图形的地方）
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
// 获取canvas的ID
var context =canvas.getContext("2d");
</script>
扫一扫
6130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
