JavaScript基础——使用Canvas绘图_第1页
JavaScript基础——使用Canvas绘图_第2页
JavaScript基础——使用Canvas绘图_第3页
JavaScript基础——使用Canvas绘图_第4页
JavaScript基础——使用Canvas绘图_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、JavaScript基础使用Canvas绘图作者：A_山水子农 字体：增加 减小 类型：转载 时间：2016-11-02 我要评论这篇文章主要介绍了JavaScript基础使用Canvas绘图，Canvas也真的跟现实生活中的画布非常相似，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。最近在学习Canvas画图的方法，最近有时间做了个整理，1、基本用法要使用<canvas>元素，必须先设置其width和height属性，指定可以绘图的区域大小，出现在开始后结束标签中的内容是后备信息，如果浏览器不支持<canvas>元素，就会显示这些信息。例如：<canvas

2、id="drawing" width="200" height="200">A Drawing of something</canvas> 使用toDataURL()方法，可以导出在<canvas>元素上绘制的图像。var drawing=document.getElementById("drawing"); /确定浏览器支持<canvas>元素 if(drawing.getContext) /取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=

3、drawing.getContext("2d"); /取得图像的数据URI var imgURI=drawing.toDataURL("image/png"); alert(imgURI); /显示图像 var image=document.createElement("img"); image.src=imgURI; document.body.appendChild(image); 2、2D上下文（1）、填充和描边填充：用指定的样式填充图形；描边：就是只在图形的边缘画线。fillStyle和strokeStyle两个属性的值可以是

4、字符串、渐变对象或模式对象。 var drawing=document.getElementById("drawing"); /确定浏览器支持<canvas>元素 if(drawing.getContext) /取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d");</span><span style="font-size:14px;">/此程序由于没有图像，填充和描边不会显示 context.strokeStyle=&qu

5、ot;#0000ff" context.fillStyle="red" （2）、绘制矩形 矩形是唯一一种可以直接在2D上下文绘制的形状。与矩形有关的方法包括：fillRec()、strokeRect()和clearRect()。这三个方法都能接收4个参数：x坐标、y坐标、宽度和高度。<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

6、 <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas id="drawing" width="200" height="

7、;200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); /确定浏览器支持<canvas>元素 if(drawing.getContext) /取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); /绘制红色矩形 co

8、ntext.fillStyle="red" context.fillRect(10,10,50,50); /绘制半透明的蓝色矩形 context.fillStyle="rgba(0,0,255,0.5)" context.fillRect(30,30,50,50); /绘制红色描边矩形 context.strokeStyle="red" context.strokeRect(10,90,50,50); /绘制半透明的蓝色描边矩形 context.strokeStyle="rgba(0,0,255,0.5)" con

9、text.strokeRect(30,120,50,50); /在两个矩形重叠的地方清除一个小矩形 context.clearRect(30,30,30,30); </script> </body> </html> 下面为使用toDataURL()方法，导出在canvas元素上绘制的图像程序如下： <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dt

10、d"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas id="drawing" width="200" h

11、eight="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <br /> <h3>下面为使用toDataURL()方法，导出在canvas元素上绘制的图像。</h3> <script> var drawing=document.getElementById("drawing"); /确定浏览器支持<canvas>元素 if(drawing.getContext) /取得绘

12、图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); /绘制红色矩形 context.fillStyle="red" context.fillRect(10,10,50,50); /绘制半透明的蓝色矩形 context.fillStyle="rgba(0,0,255,0.5)" context.fillRect(30,30,50,50); /绘制红色描边矩形 context.strokeStyle="red" context.strokeRec

13、t(10,90,50,50); /绘制半透明的蓝色描边矩形 context.strokeStyle="rgba(0,0,255,0.5)" context.strokeRect(30,120,50,50); /在两个矩形重叠的地方清除一个小矩形 context.clearRect(30,30,30,30); /取得图像的数据URI var imgURI=drawing.toDataURL("image/png"); /显示图像 var image=document.createElement("img"); image.src=img

14、URI; document.body.appendChild(image); </script> </body> </html> （3）、绘制路径要绘制路径，首先必须调用beginPath()方法，表示要开始绘制新路径。<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/w

15、/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas id="drawing" width="420" height="420" style="border

16、:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); /确定浏览器支持<canvas>元素 if(drawing.getContext) /取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); /开始路径 context.beginPath(); /*绘制弧线，使用arc

17、(x,y,radius,startAngle,endAngle,counterclockwise)方法 以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle 和endAngle。最后一个参数表示是否按逆时针方向计算，值为false表示顺时针方向计算。 */context.arc(130,130,90,0,2*Math.PI,false); /*arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给 定的半径radius穿过(x1,y1) */context.arcTo(310,220

18、,400,130,80) /*bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到（x,y）为 止，并且以(c1x,c1y)和(c2x,c2y)为控制的。 */context.bezierCurveTo(320,210,400,250,310,300); /*lineTo(x,y):从上一点开始绘制一条直线，到(x,y)为止*/context.lineTo(0,300); context.moveTo(130,220); context.lineTo(100,300); /*quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一

19、条二次曲线，到(x,y)为止，并且 以(cx,cy)作为控制点 */context.quadraticCurveTo(40,380,130,400); context.lineTo(450,400); /*rect(x,y,width,height):从点（x,y）开始绘制一个矩形路径*/context.rect(80,80,100,100) context.strokeStyle="rgba(0,0,255,0.5)" /最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); </script> </body&

20、gt; </html> <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/ht

21、ml; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementB

22、yId("drawing"); /确定浏览器支持<canvas>元素 if(drawing.getContext) /取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); /开始路径 context.beginPath(); /绘制外圆 context.arc(100,100,99,0,2*Math.PI,false); /绘制内圆 context.moveTo(194,100);/将绘图游标移动到（x,y），不画线 context.arc(100,100,94,0

23、,2*Math.PI,false); /绘制分针 context.moveTo(100,100); context.lineTo(100,15); /绘制时针 context.moveTo(100,100); context.lineTo(35,100); context.strokeStyle="rgba(0,0,255,0.5)" /最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); </script> </body> </html> （4）、绘制文本绘制文本主要有两个方法：fillTe

24、xt()和strokeText()。这两个方法接收4个参数：要绘制的文本字符串、x坐标，y坐标和可选的最大像素宽度。这两个方法有三个属性：font、textAlign和textBaseline。 <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml">

25、 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Dra

26、wing of something</canvas> <script> var drawing=document.getElementById("drawing"); /确定浏览器支持<canvas>元素 if(drawing.getContext) /取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); /开始路径 context.beginPath(); /绘制外圆 context.arc(100,100,99,0,2*Math.PI,f

27、alse); /绘制内圆 context.moveTo(194,100);/将绘图游标移动到（x,y），不画线 context.arc(100,100,94,0,2*Math.PI,false); /绘制分针 context.moveTo(100,100); context.lineTo(100,20); /绘制时针 context.moveTo(100,100); context.lineTo(35,100); /添加文字“12” context.font="bold 14px Arial" context.textAlign="center" con

28、text.textBaseline="middle"/文本的基线 context.fillText("12",100,15); context.strokeStyle="rgba(0,0,255,0.5)" /最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); </script> </body> </html> （5）、变换<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/E

29、N" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <

30、;body> <canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); /确定浏览器支持<canvas>元素 if(getContext) /取得绘图上下文对象的引用，“2d

31、”是取得2D上下文对象 var context=drawing.getContext("2d"); /开始路径 context.beginPath(); /缩放图像 /*scale(scaleX,scaleY):缩放图像，在x方向乘以scaleX，在y方向乘以scaleY。 scaleX和scaleY的默认值都是1.0 */context.scale(0.8,0.8); /绘制外圆 context.arc(100,100,99,0,2*Math.PI,false); /绘制内圆 context.moveTo(194,100);/将绘图游标移动到（x,y），不画线 conte

32、xt.arc(100,100,94,0,2*Math.PI,false); /变换原点 /*translate(x,y):将坐标原点移动到（x,y）。执行这个变换后，坐标(0,0)会变成之 前由(x,y)表示的点 */context.translate(100,100); /添加文字“12” context.font="bold 14px Arial" context.textAlign="center" context.textBaseline="middle"/文本的基线 context.fillText("12&quo

33、t;,0,-85); /旋转表针 /*rotate(angle):围绕原点旋转图像angle弧度*/context.rotate(1); /绘制分针 context.moveTo(0,0); context.lineTo(0,-80); /绘制时针 context.moveTo(0,0); context.lineTo(-65,0); context.strokeStyle="rgba(0,0,255,0.5)" /最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); </script> </body>

34、</html> （6）、绘制图像var drawing=document.getElementById("drawing"); /确定浏览器支持<canvas>元素 if(drawing.getContext) /取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); var image=ment.getElementById("image"); context.drawImage(image,10,10,20,20);/起点为(10,

35、10)，图像大小会变成20x20像素； （7）、阴影 <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&quo

36、t;text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.ge

37、tElementById("drawing"); /确定浏览器支持<canvas>元素 if(drawing.getContext) /取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); /设置阴影 context.shadowColor="rgba(0,0,0,0.5)"/设置阴影颜色 context.shadowOffsetX=5;/设置形状或路径x轴方向的阴影偏移量，默认值为0； context.shadowOffsetY=5;/设置形状

38、或路径y轴方向的阴影偏移量，默认值为0； context.shadowBlur=4;/设置模糊的像素数，默认值为0，即不模糊。 /绘制红色矩形 context.fillStyle="red" context.fillRect(10,10,50,50); /绘制半透明的蓝色矩形 context.fillStyle="rgba(0,0,255,1)" context.fillRect(30,30,50,50); </script> </body> </html> （8）、渐变 渐变由CanvasGradient实例表示，很

39、容易通过2D上下文来创建和修改。要创建一个新的先行渐变，可以调用createLinearGradient()方法。这个方法接收4个参数：起点的x坐标，起点的y坐标，终点的x坐标，终点的y坐标。创建渐变对象后，下一步就是使用addColorStop()方法来指定色标，这个方法接收两个参数：色标位置和css颜色值。色标位置是一个0（开始的颜色）到1（结束的颜色）之间的数据。 <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xht

40、ml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas id="drawing" widt

41、h="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); /确定浏览器支持<canvas>元素 if(drawing.getContext) /取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getConte

42、xt("2d"); /设置渐变 var gradient=context.createLinearGradient(30,30,70,70); gradient.addColorStop(0,"white"); gradient.addColorStop(1,"black"); /绘制红色矩形 context.fillStyle="red" context.fillRect(10,10,50,50); /绘制渐变矩形 context.fillStyle=gradient; context.fillRect(30,3

43、0,50,50); </script> </body> </html> 为了确保渐变与形状对齐，有时候可以考虑使用函数来确保坐标合适， function createRectLinearGradient(context,x,y,width,height) return context.createLinearGradient(x,y,x+width,y+height); <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "

44、/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas id="

45、drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); /确定浏览器支持<canvas>元素 if(drawing.getContext) /取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var contex

46、t=drawing.getContext("2d"); /设置渐变 var gradient=createRectLinearGradient(context,30,30,50,50); gradient.addColorStop(0,"white"); gradient.addColorStop(1,"black"); /绘制红色矩形 context.fillStyle="red" context.fillRect(10,10,50,50); /绘制渐变矩形 context.fillStyle=gradient; context.fillRect(30,30,50,50); /确保渐变与形状对齐 function createRectLinearGradient(context,x,y,width,height) return context.createLinearGradient(x,y,x+width,y+he

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论