学习记录(一)之h5_canvas
生活随笔
收集整理的這篇文章主要介紹了
学习记录(一)之h5_canvas
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
canvas(畫布)
canvas(畫布):
利用JS在網(wǎng)頁中繪制圖像。
標(biāo)簽:<canvas></canvas>
屬性:height,width(寬高屬性要寫在行內(nèi)樣式中);
公共步驟:
1.獲取對象
2.準(zhǔn)備繪制工具--獲取上下文
方法:
起始點(diǎn)坐標(biāo):? ?ctx.moveTo(x軸坐標(biāo),y軸坐標(biāo));
畫線:? ?ctx.lineTo(x坐標(biāo),y坐標(biāo))
描邊顏色:? ?ctx.style="#f00";
描邊寬度:? ctx.lineWidth=0;
填充顏色:? ctx.fillStyle="aqua";
填充:? ctx.fill();
描邊(默認(rèn):黑色1px):? ?ctx.stroke();
開辟新路徑:? ctx.beginPath();
?
定義一個(gè)漸變方案-保存在一個(gè)變量中:
? var mylinear.creatliGradient(起始坐標(biāo),起始坐標(biāo),結(jié)束坐標(biāo),結(jié)束坐標(biāo));
? mylinear.addColorStop(位置,"#00f");
? mylinear.addColorStop(位置,"#0ff");
給矩形,添加漸變色:
? ctx.fillstyle=mylinear;
? ctx.rect(100,100,200,200);
?
繪制描邊矩形:ctx.strokeRect(起始坐標(biāo),起始坐標(biāo)結(jié)束坐標(biāo),結(jié)束坐標(biāo));
繪制填充矩形 ctx.fillRect(起始坐標(biāo),起始坐標(biāo)結(jié)束坐標(biāo),結(jié)束坐標(biāo))
清除矩形ctx.clearRect(起始坐標(biāo),起始坐標(biāo),結(jié)束坐標(biāo),結(jié)束坐標(biāo))
?
設(shè)置文本:?
? ctx.font="24px 微軟雅黑";//字體
? ctx.fillstyl="#f00";//字體顏色
? ctx.text.align="left";//文本對齊方式有三個(gè)值:left,right,center
? ctx.textBaseline="midden";//基線對齊方式三個(gè)值:middle,top,bottom ctx.fillText("字符串",??起始坐標(biāo),起始坐標(biāo));
?
畫圓:? ?ctx.arc(圓心,圓心,半徑,起始角,結(jié)束角,順/逆時(shí)針)
?
創(chuàng)建img圖片:
? var img=new Img();
? img src="img";
? img.οnlοad=function(){
ctx.drawImage(img,0,0,512,265)
? }
?
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>線</title><style type="text/css">canvas{border: solid 1px #000;}</style></head><body><canvas width="500" height="500" id="mycanvas"></canvas><script type="text/javascript">var mycanvas=document.getElementById("mycanvas"); //獲取對象var ctx=mycanvas.getContext("2d"); //準(zhǔn)備繪制工具 //起始點(diǎn)坐標(biāo) ctx.moveTo(100,100.5);//畫線ctx.lineTo(300,100.5);//描邊顏色ctx.style="#f00";//描邊寬度ctx.lineWidth=10;//填充顏色ctx.fillStyle="aqua";//填充ctx.fill();//描邊(默認(rèn):黑色1px)ctx.stroke();//開辟新路徑ctx.beginPath();//定義一個(gè)漸變方案-保存在一個(gè)變量中var mylinear.creatliGradient(100,100,300,300);mylinear.addColorStop(0,"#00f");mylinear.addColorStop(0.5,"#0ff");mylinear.addColorStop(1,"#0f0");//繪制矩形,添加漸變色ctx.fillstyle=mylinear;ctx.rect(100,100,200,200);/*繪制描邊矩形ctx.strokeRect(100,100,300,200);繪制填充矩形ctx.fillRect(100,100,200,300);*///清除矩形ctx.clearRect(200,200,100,100)//設(shè)置文本ctx.font="24px 微軟雅黑";//字體ctx.fillstyl="#f00";//字體顏色ctx.text.align="left";//文本對齊方式有三個(gè)值:left,right,centerctx.textBaseline="midden";//基線對齊方式三個(gè)值:middle,top,bottomctx.fillText("hello",100,100);//畫圓ctx.arc(100,100,100,0,2*Math.PI,false)//圖片(在script中的src除外,其他src都是異步);var img=document.getElementsByTagName("img")[0];ctx.drawImage(img,0,0);//解決方法一,要放在.onloada方法中--等待所有資源下載完成后再去執(zhí)行;//解決異步的第二種方法//創(chuàng)建img圖片var img=new Img();img src="img";img.onload=function(){ctx.drawImage(img,0,0,512,265)}</script></body> </html>?
?
?
實(shí)例:用canvas繪制動(dòng)態(tài)折線圖和柱形圖
注意:canvas坐標(biāo)原點(diǎn)與自定義坐標(biāo)之間的換算
1.折線圖:例
?
?
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="utf-8" />5 <title></title>6 <style type="text/css">7 canvas{8 border: solid 1px #000;9 margin-left: 300px;10 }11 </style>12 </head>13 <body>14 <canvas width="600" height="400" id="mycanvas"></canvas>15 <script type="text/javascript">16 var mycanvas=document.getElementById("mycanvas");17 var ctx=mycanvas.getContext("2d");18 //網(wǎng)格-循環(huán)添加-定義間隔變量space-橫線劃線起點(diǎn)(0,space*i)終點(diǎn)(canvasw,space*i)19 var space=10;20 var canvasw=600;21 var canvash=400;22 for (var i = 0; i<40; i++) {23 ctx.moveTo(0,space*i+0.5);24 ctx.lineTo(canvasw,space*i+0.5);25 ctx.strokeStyle="#eee";26 ctx.stroke();27 }28 //同理-豎線29 for (var i = 0; i<60; i++) {30 ctx.moveTo(space*i+0.5,0);31 ctx.lineTo(space*i+0.5,canvash);32 ctx.strokeStyle="#eee";33 ctx.stroke();34 }35 //畫橫縱坐標(biāo)軸-定義坐標(biāo)原點(diǎn)(x0,y0)--x軸起點(diǎn)(x0,y0),x軸終點(diǎn)(canvasw-x0,y0)36 // 三角形/填充-起點(diǎn)(canvasw-x0,y0)-第二個(gè)點(diǎn)(canvasw-x0-6,y0-3)-第三個(gè)點(diǎn)(canvasw-x0-6,y0+3)-回到起點(diǎn)37 var yd=30; //原點(diǎn)與邊框的距離38 var x0=yd;39 var y0=Math.floor(canvash-yd);40 ctx.beginPath();41 ctx.moveTo(x0,y0);42 ctx.lineTo(canvasw-x0,y0);43 ctx.strokeStyle="#000000"44 ctx.stroke();45 //三角形46 ctx.moveTo(canvasw-x0,y0);47 ctx.lineTo(canvasw-x0-6,y0-4);48 ctx.lineTo(canvasw-x0-6,y0+4);49 ctx.lineTo(canvasw-x0,y0);50 ctx.fillStyle="#000000"51 ctx.fill();52 ctx.textAlign="left";53 ctx.textBaseline="middle";54 ctx.font="16px 微軟雅黑"55 ctx.fillText("X",canvasw-x0,y0)56 //y軸57 ctx.beginPath();58 ctx.moveTo(x0,y0);59 ctx.lineTo(x0,yd);60 ctx.strokeStyle="#000000"61 ctx.stroke();62 //三角形63 ctx.moveTo(x0,yd);64 ctx.lineTo(x0-3,yd+6);65 ctx.lineTo(x0+3,yd+6);66 ctx.lineTo(x0,yd);67 ctx.fillStyle="#000000"68 ctx.fill();69 ctx.textAlign="center";70 ctx.textBaseline="bottom";71 ctx.font="16px 微軟雅黑"72 ctx.fillText("Y",x0,yd)73 74 //數(shù)據(jù)75 var arr=[76 {77 x:50,78 y:35079 },80 {81 x:150,82 y:31083 },84 {85 x:250,86 y:5087 },88 {89 x:350,90 y:25091 },92 {93 x:500,94 y:20095 }96 ]97 98 ctx.beginPath();99 ctx.moveTo(x0,y0); 100 for(i=0;i<arr.length;i++){ 101 //線段 102 ctx.lineTo(arr[i].x,y0-arr[i].y); 103 ctx.strokeStyle="#f00"; 104 ctx.stroke(); 105 //矩形 106 ctx.fillStyle="#f00"; 107 ctx.fillRect(arr[i].x-3,y0-arr[i].y,6,6); 108 //文字 109 ctx.textAlign="left"; 110 ctx.textBaseline="top"; 111 ctx.fillStyle="#333"; 112 ctx.fillText("("+arr[i].x+","+arr[i].y+")",arr[i].x,y0-arr[i].y) 113 114 115 } 116 </script> 117 </body> 118 </html>2.柱形圖:例
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style>7 canvas{8 background-color: #efefef;9 margin-left: 300px;10 }11 </style>12 </head>13 <body>14 <canvas width="800" height="460" id="mycanvas"></canvas>15 <script type="text/javascript">16 var mycanvas=document.getElementById("mycanvas");17 var ctx=mycanvas.getContext("2d");18 19 var space=100;20 var canvasw=ctx.canvas.width;21 var canvash=ctx.canvas.height;22 23 //畫橫縱坐標(biāo)軸-定義坐標(biāo)原點(diǎn)(x0,y0)--x軸起點(diǎn)(x0,y0),x軸終點(diǎn)(canvasw-x0,y0)24 var yd=30; //原點(diǎn)與邊框的距離25 var x0=yd;26 var y0=Math.floor(canvash-yd);27 ctx.beginPath();28 ctx.moveTo(x0,y0);29 ctx.lineTo(canvasw-x0,y0);30 ctx.strokeStyle="#000000"31 ctx.stroke();32 //y軸33 ctx.beginPath();34 ctx.moveTo(x0,y0);35 ctx.lineTo(x0,yd);36 ctx.strokeStyle="#000000"37 ctx.stroke();38 //橫線39 ctx.beginPath();40 for (var i = 1; i<5; i++) {41 ctx.moveTo(x0,y0-space*i);42 ctx.lineTo(canvasw-x0,y0-space*i);43 ctx.strokeStyle="#ccc";44 ctx.stroke();45 }46 //前橫線47 ctx.beginPath();48 for (var i = 0; i<5; i++) {49 50 ctx.moveTo(x0-6,y0-space*i);51 ctx.lineTo(x0,y0-space*i);52 ctx.strokeStyle="#333";53 ctx.stroke();54 55 ctx.font="12px 微軟雅黑 ";56 ctx.textAlign="right";57 ctx.textBaseline="middle";58 ctx.fillStyle="#333";59 ctx.fillText(100*i,x0-6,y0-space*i)60 }61 var arr=[62 {63 x:"Mon",64 y:5065 },66 {67 x:"Tue",68 y:11069 },70 {71 x:"Wed",72 y:15073 },74 {75 x:"Thu",76 y:35077 },78 {79 x:"Fri",80 y:20081 },82 {83 x:"sat",84 y:21085 },86 {87 x:"sun",88 y:23089 }90 ]91 92 ctx.beginPath();93 for (var i = 0; i<arr.length; i++) {94 ctx.moveTo(x0+space*(i+1),y0);95 ctx.lineTo(x0+space*(i+1),y0+6);96 ctx.strokeStyle="#333";97 ctx.stroke();98 99 //星期 100 ctx.font="16px 微軟雅黑 "; 101 ctx.textAlign="center"; 102 ctx.textBaseline="top"; 103 ctx.fillStyle="#333"; 104 ctx.fillText(arr[i].x,x0+space*(i+1),y0+6); 105 //矩形 106 ctx.fillStyle="#f00"; 107 ctx.fillRect(x0+space*(i+1)-30,y0-arr[i].y,60,arr[i].y); 108 ctx.textBaseline="top"; 109 ctx.fillStyle="#333"; 110 } 111 112 </script> 113 </body> 114 </html>?
總結(jié)
以上是生活随笔為你收集整理的学习记录(一)之h5_canvas的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 奇瑞见习生怎么定级
- 下一篇： 如何清除浮动(float)所带来的影响