canvas基础教程（含示例）_第1页
canvas基础教程（含示例）_第2页
canvas基础教程（含示例）_第3页
canvas基础教程（含示例）_第4页
canvas基础教程（含示例）_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

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

文档简介

canvas基础教程一、canvas通过JS完成画图而不是csscanvas默认inline-block，可以认为是一种特殊的图片。1、canvas划线<canvasid="can"width="800"height="800"></canvas>（宽高不能放在style里面，否则比例不对）canvas里面的width和height相当于图片的原始尺寸，加了外部style的宽高，就相当于对图片进行压缩和拉伸。//1、获取原生dom对象letdom=document.getElementById('can');//2、获取绘图对象letcan=dom.getContext('2d');//3d是webgl//定义线条起点can.moveTo(0,0);//定义线条中点（非终点）can.lineTo(400,400);can.lineTo(800,0);//对标记范围进行描边can.stroke()//对标记范围进行填充can.fill();2、设置线条属性线条默认宽度是1.（一定要在绘图之前设置。）can.lineWidth=2;//设置线条宽度can.strokeStyle='#f00';//设置线条颜色can.fillStyle='#f00';//设置填充区域颜色3、折线样式miter：尖角（当尖角长度值过长时会自动变成折角，如果强制显示尖角：can.miterLimit=100设置尖角长度阈值）round：圆角bevel：折角can.lineJoin='miter';can.moveTo(100,100);can.lineTo(300,100);can.lineTo(100,200);can.stroke()can.lineJoin='round';can.moveTo(400,100);can.lineTo(600,100);can.lineTo(400,200);can.stroke()can.lineJoin='bevel';can.moveTo(700,100);can.lineTo(900,100);can.lineTo(700,200);can.stroke()4、设置线帽round：加圆角线帽square：加直角线帽butt：不加线帽 can.lineCap='round'; can.moveTo(100,100); can.lineTo(300,100); can.stroke()//新建绘图，使得上一次的绘画样式不会影响下面的绘画样式（代码加在上一次绘画和下一次绘画中间。） can.beginPath() can.lineCap='square'; can.moveTo(100,200); can.lineTo(300,200); can.stroke() can.beginPath() can.lineCap='butt'; can.moveTo(100,300); can.lineTo(300,300);5、画矩形//参数：x,y,宽，高can.rect(100,100,100,100);can.stroke();//画完即填充can.fillRect(100,100,100,100);6、画圆弧//参数：圆心x，圆心y，半径，圆弧起点与圆心的夹角度数，圆弧终点与圆心的夹角度数，true（逆时针绘画）can.arc(500,300,200,0,2*Math.PI/360*90,false);can.stroke()示例：can.moveTo(500,300);can.lineTo(500+Math.sqrt(100),300+Math.sqrt(100))can.arc(500,300,100,2*Math.PI/360*startDeg,2*Math.PI/360*endDeg,false);can.closePath()//将图形起点和终点用线连接起来使之成为封闭的图形can.fill()1、can.beginPath()

//新建绘图，使得上一次的绘画样式不会影响下面的绘画样式（代码加在上一次绘画和下一次绘画中间。）2、can.closePath()

//将图形起点和终点用线连接起来使之成为封闭的图形。7、旋转画布can.rotate(2*Math.PI/360*45);//一定要写在开始绘图之前can.fillRect(0,0,200,10);旋转整个画布的坐标系（参考坐标为画布的(0,0)位置）8、缩放画布can.scale(0.5,2);can.fillRect(0,0,200,10);整个画布：x方向缩放为原来的0.5，y方向拉伸为原来的2倍。9、画布位移can.translate(100,100)can.fillRect(0,0,200,10);10、保存与恢复画布状态can.save()//存档：保存当前画布坐标系状态can.restore()//读档：恢复之前保存的画布坐标系状态11、示例1：指针时钟<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>clock</title><styletype="text/css">#can{width:1000px;height:600px;background:linear-gradient(45deg,green,skyblue);}</style></head><body><canvasid="can"width="2000"height="1200"></canvas></body><scripttype="text/javascript">letdom=document.getElementById('can');letcan=dom.getContext('2d');//把画布的圆心移动到画布的中心can.translate(dom.width/2,dom.height/2);//保存当前的画布坐标系can.save()run();functionrun(){setInterval(function(){clearCanvas();draw();},10);}//绘图functiondraw(){lettime=newDate();lethour=time.getHours();letmin=time.getMinutes();letsec=time.getSeconds();letminSec=time.getMilliseconds();drawPannl();drawHour(hour,min,sec);drawMin(min,sec);drawSec(sec,minSec);drawPoint();}//最简单的方法：由于canvas每当高度或宽度被重设时，画布内容就会被清空functionclearCanvas(){dom.height=dom.height;can.translate(dom.width/2,dom.height/2);can.save()}//画表盘functiondrawPannl(){can.beginPath();can.restore()can.save()can.lineWidth=10;can.strokeStyle='skyblue';can.arc(0,0,400,0,2*Math.PI);can.stroke();for(leti=0;i<12;i++){can.beginPath();can.lineWidth=16;can.strokeStyle='greenyellow';can.rotate(2*Math.PI/12)can.moveTo(0,-395);can.lineTo(0,-340);can.stroke();}for(leti=0;i<60;i++){can.beginPath();can.lineWidth=10;can.strokeStyle='#fff';can.rotate(2*Math.PI/60)can.moveTo(0,-395);can.lineTo(0,-370);can.stroke();}}//画时针functiondrawHour(h,m,s){can.beginPath();can.restore()can.save()can.lineWidth=24;can.strokeStyle='palevioletred';can.lineCap='round'can.rotate(2*Math.PI/(12*60*60)*(h*60*60+m*60+s))can.moveTo(0,0);can.lineTo(0,-200);can.stroke();}//画分针functiondrawMin(m,s){can.beginPath();can.restore()can.save()can.lineWidth=14;can.strokeStyle='#09f';can.lineCap='round'can.rotate(2*Math.PI/(60*60)*(m*60+s))can.moveTo(0,0);can.lineTo(0,-260);can.stroke();}//画秒针functiondrawSec(s,ms){can.beginPath();can.restore()can.save()can.lineWidth=8;can.strokeStyle='#f00';can.lineCap='round'can.rotate(2*Math.PI/(60*1000)*(s*1000+ms));can.moveTo(0,50);can.lineTo(0,-320);can.stroke();}//画中心点functiondrawPoint(){can.beginPath();can.restore()can.save()can.lineWidth=10;can.fillStyle='red';can.arc(0,0,12,0,2*Math.PI);can.fill();}</script></html>12、示例2：圆弧时钟<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>clock</title><styletype="text/css">#can{width:1000px;height:600px;background:linear-gradient(45deg,rgb(94,53,6),black);}</style></head><body><canvasid="can"width="2000"height="1200"></canvas></body><scripttype="text/javascript">letdom=document.getElementById('can');letcan=dom.getContext('2d');//把画布的圆心移动到画布的中心can.translate(dom.width/2,dom.height/2);//保存当前的画布坐标系can.save();//圆形指针起始角度letstartDeg=2*Math.PI/360*270;run();//draw();functionrun(){setInterval(function(){clearCanvas();draw();},20);}//绘图functiondraw(){lettime=newDate();//lethour=time.getHours();lethour=time.getHours()>10?time.getHours()-12:time.getHours();letmin=time.getMinutes();letsec=time.getSeconds();letminSec=time.getMilliseconds();drawPannl();drawTime(hour,min,sec,minSec);drawHour(hour,min,sec);drawMin(min,sec);drawSec(sec,minSec);drawPoint();}//最简单的方法：由于canvas每当高度或宽度被重设时，画布内容就会被清空functionclearCanvas(){dom.height=dom.height;can.translate(dom.width/2,dom.height/2);can.save()}//画表盘functiondrawPannl(){can.restore()can.save()//设置时表盘can.beginPath();can.lineWidth=50;can.strokeStyle='rgba(255,23,87,0.2)';can.arc(0,0,400,0,2*Math.PI);can.stroke();//设置分表盘can.beginPath();can.strokeStyle='rgba(169,242,15,0.2)';can.arc(0,0,345,0,2*Math.PI);can.stroke();//设置秒表盘can.beginPath();can.strokeStyle='rgba(21,202,230,0.2)';can.arc(0,0,290,0,2*Math.PI);can.stroke();//小时刻度//for(leti=0;i<12;i++){//can.beginPath();//can.lineWidth=16;//can.strokeStyle='rgba(0,0,0,0.2)';//can.rotate(2*Math.PI/12)//can.moveTo(0,-375);//can.lineTo(0,-425);//can.stroke();//}//分针刻度//for(leti=0;i<60;i++){//can.beginPath();//can.lineWidth=10;//can.strokeStyle='#fff';//can.rotate(2*Math.PI/60)//can.moveTo(0,-395);//can.lineTo(0,-370);//can.stroke();//}}//画时针functiondrawHour(h,m,s){letrotateDeg=2*Math.PI/(12*60*60)*(h*60*60+m*60+s);can.beginPath();can.restore()can.save()//时针圆弧can.lineWidth=50;can.strokeStyle='rgb(255,23,87)';can.lineCap='round';can.shadowColor="rgb(255,23,87)";//设置阴影颜色can.shadowBlur=20;//设置阴影范围can.arc(0,0,400,startDeg,startDeg+rotateDeg);can.stroke();//时针指针can.beginPath();can.lineWidth=24;can.strokeStyle='rgb(255,23,87)';can.lineCap='round'can.rotate(rotateDeg)can.moveTo(0,0);can.lineTo(0,-100);can.stroke();}//画分针functiondrawMin(m,s){letrotateDeg=2*Math.PI/(60*60)*(m*60+s);can.beginPath();can.restore()can.save()//分针圆弧can.lineWidth=50;can.strokeStyle='rgb(169,242,15)';can.lineCap='round'can.shadowColor="rgb(169,242,15)";can.shadowBlur=20;can.arc(0,0,345,startDeg,startDeg+rotateDeg);can.stroke();//分针指针can.beginPath();can.lineWidth=14;can.strokeStyle='rgb(169,242,15)';can.lineCap='round'can.rotate(rotateDeg)can.moveTo(0,0);can.lineTo(0,-160);can.stroke();}//画秒针functiondrawSec(s,ms){letrotateDeg=2*Math.P

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

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

最新文档

评论

0/150

提交评论