- 画布是一个元素,可以放在页面上来创建一个绘制空间
- 除非你指定,否则画布没有默认的样式或内容(所以在画布上绘制内容或用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中设置宽高
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。