- 画布是一个元素，可以放在页面上来创建一个绘制空间
- 除非你指定，否则画布没有默认的样式或内容（所以在画布上绘制内容或用CSS增加边框之前，在页面上是看不到画布的）
- 页面上可以有多个画布。当然，需要为每个画布提供一个唯一的id，以便使用javascript分别访问
- 要指定画布元素的大小，可以使用元素的width和height属性
- 画布上的所有内容都使用javascript绘制
- 要在画布上绘制，首先要创建一个上下文（context）。目前，2D上下文是唯一的选择，不过将来可能还会有其他上下文类型（来自2015年的声音，现在还没有2D以外的）
- 要在画布中绘制，需要有一个上下文，因为上下文提供了一个特定的接口（例如，2D或3D）。你可以从多种接口中选择来完成画布上的绘制
- 使用上下文属性和方法来访问画布
- 要在画布中绘制一个矩形，可以使用context.fillRect方法。这个方法会创建一个矩形，并填充指定的颜色
- 要创建一个矩形轮廓，可以使用strokeRect而不是fillRect（创建矩形填充）
- 使用fillStyle和strokenStle一时改变默认的填充和笔画颜色，默认颜色为黑色
- 可以使用css中同样的格式指定颜色（例如，“black”,"#000000","rgb(0,0)"）。要记住要在fillStyle值两边加上引号，不然javascript可能就会把它当作一个变量了
- 并没有一个fillCircle方法。要在画布上绘制一个圆，需要绘制一个弧
- 要创建任意的形状或弧，首先需要创建一个路径
- 路径是一个不可见的线或形状，它定义了画布上的一条线或区域。用笔画描绘出路径或填充路径之前，路径是看不到的
- 要创建一个三角形，可以使用beginPath创建一个路径，然后用moveto和lineto来绘制路径。使用closePath可以连接路径上两个点
<!doctype html> <html> <head> <Meta charset="utf-8"> <title>绘制三角形Demo</title> </head> <body> <canvas id="myCanvas" width="800" height="500"></canvas> </body> <script> window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); //不要这个也行 context.moveto(100,100); context.lineto(400,100); context.lineto(250,300); context.lineto(100,100); context.closePath(); //不要这个closePath也可以画出来 context.stroke(); }; </script> </html>
- 要绘制一个圆，可以创建一个360度的弧。起始角为0，终止角为360.（我这里有些一个demo）
- 画布中使用弧度来指定角，而不是使用度，所以需要从度转换为弧度来指定起始角和终止角
- 360度=2π弧度
- 要在画布上绘制文本，可以使用fillText方法
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillText("Hello World",10,10);//这两个数字是横纵坐标 };
- 设置一个上下文属性时，需要使用上下文属性指定位置、样式和其他属性
- 使用一个上下文属性时，它会应用到后面的所有绘制操作，直到你再次改变这个属性。例如，改变fillStyle会影响设置fillStyle之后绘制的所有形状和文本颜色
- 可以用drawImage方法向画布中增加图像
- 需要增加一个图像，首先需要创建一个图像对象，并确保它完全加载
- 在画布上绘制就像在图形程序程序中完成“位图”绘制。
注意
1、设置canvas的宽高时，最好在html页面写设置好canvas的宽高，不要再css和javascript中设置宽高
