- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- cas{
- border: 1px solid #ccc;
- }
- </style>
- <script>
- //canvas: 帆布 画布
- //canvas 是 html5 中新增的一个标签
- //canvas 的特点:
- //1. 尺寸
- //canvas 的默认宽高为 300 * 150
- //canvas 设置宽高可以通过标签的属性 width 和 height 来设置 (通常的做法)
- // 也可以通过 CSS 样式来设置, 但是通过 css 样式设置会将画布拉伸
- //2. 页面中可以有多个 canvas 标签
- //3. canvas 标签只是一个用来展示绘图效果的标签, 具体的绘图工作, 还是要通过 js 代码来实现
- //4. 绘图要通过绘图工具 (绘图上下文), 这个绘图工具要通过 canvas 对象来获取
- //canvas 对象. getContext(type);
- //type 是一个字符串, 表示要获取的绘图工具的类型
- //"2d": 获取 2d 绘图工具
- //"webgl" 获取 3d 绘图工具 three.js
- //5. 每一个 canvas 标签都拥有自己的画图工具, 不同的 canvas 绘图要通过该 canvas 自己的绘图工具!
- //6. canvas 有兼容性问题, canvas 标签中写的内容, 在支持 canvas 的浏览器当中不会显示, 但是在不支持 canvas 标签的浏览器中, canvas 标签会被当做 div 来处理, 所以里面的内容, 就会显示出来了 (一般情况下, 我们会在 canvas 标签中写一些提示信息)
- //7. canvas 的 API 的兼容性非常好, 在所有支持 canvas 标签的浏览器当中, canvas 的体现都是完全一致的, 所以代码基本上是通用的!
- //canvas 的使用步骤
- //1. 在页面上写一个 canvas 标签
- //2. 获取 canvas 对象
- //3. 通过 canvas 对象获取绘图工具
- //4. 通过绘图工具. moveTo() 告诉绘图工具起始位置
- //5. 通过绘图工具. lineTo() 告诉绘图工具结束位置
- //6. 通过绘图工具. stroke() 通知绘图工具画线!
- </script>
- </head>
- <body>
- <canvas width="600" height="400" id="cas"> 你猜你能不能看见我!</canvas>
- <script>
- //1. 获取了 canvas 对象
- var cas = document.querySelector("#cas");
- //2. 获取绘图工具
- var ctx = cas.getContext("2d");
- //3. 告诉绘图工具在哪里落笔 绘图工具. moveTo(x, y)
- ctx.moveTo(100, 100);
- //4. 告诉绘图工具画到哪里去 绘图工具. lineTo(x, y)
- ctx.lineTo(500, 100);
- //5. 告诉绘图工具把线描出来 绘图工具. stroke();
- ctx.stroke();
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/47151/6e85e1105dd2691b630692b976518f4c.html