整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          html5 canvas 繪圖

          html5 canvas 繪圖

          TML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。

          畫布是一個矩形區域,您可以控制其每一像素。

          canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

          下面是一個用 HTML5 的 canvas 繪制的 3D 玫瑰花。

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

          <html>

          <head>

          <title>3D玫瑰花</title>

          <meta name="Generator" content="EditPlus">

          <meta name="Author" content="">

          <meta name="Keywords" content="">

          <meta name="Description" content="">

          </head>

          <body>

          <div id="demo" style="width:520; height:500px;"><canvas id="c" height="500" width="500"></canvas></div>

          <script>

          var b=document.body;

          var c=document.getElementsByTagName('canvas')[0];

          var a=c.getContext('2d');

          var canvas=document.getElementsByTagName('canvas')[0];

          var ctx=canvas.getContext('2d');

          document.body.clientWidth;

          with(m=Math)C=cos,S=sin,P=pow,R=random;

          c.width=c.height=f=500;h=-250;

          function p(a,b,c){

          if(c>60)

          return[S(a*7)*(13+5/(.2+P(b*4,4)))-S(b)*50,b*f+50,625+C(a*7)*(13+5/(.2+P(b*4,4)))+b*400,a*1-b/2,a];

          A=a*2-1;

          B=b*2-1;

          if(A*A+B*B<1){

          if(c>37){

          n=(j=c&1)?6:4;o=.5/(a+.01)+C(b*125)*3-a*300;

          w=b*h;

          return[o*C(n)+w*S(n)+j*610-390,o*S(n)-w*C(n)+550-j*350,1180+C(B+A)*99-j*300,.4-a*.1+P(1-B*B,-h*6)*.15-a*b*.4+C(a+b)/5+P(C((o*(a+1)+(B>0?w:-w))/25),30)*.1*(1-B*B),o/1e3+.7-o*w*3e-6]

          }

          if(c>32){

          c=c*1.16-.15;o=a*45-20;w=b*b*h;z=o*S(c)+w*C(c)+620;

          return[o*C(c)-w*S(c),28+C(B*.5)*99-b*b*b*60-z/2-h,z,(b*b*.3+P((1-(A*A)),7)*.15+.3)*b,b*.7]

          }

          o=A*(2-b)*(80-c*2);

          w=99-C(A)*120-C(b)*(-h-c*4.9)+C(P(1-b,7))*50+c*2;z=o*S(c)+w*C(c)+700;

          return[o*C(c)-w*S(c),B*99-C(P(b, 7))*50-c/3-z/1.35+450,z,(1-b/1.2)*.9+a*.1, P((1-b),20)/4+.05]

          }

          }

          var draw=setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}',0);

          var demo=document.getElementById('demo');

          function redraw(){

          /*

          var d_c=document.createElement("canvas");

          d_c.setAttribute("id","c");

          d_c.setAttribute("width","520");

          d_c.setAttribute("height","500");

          demo.appendChild(d_c);

          */

          draw=setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}',0);

          //alert(d_c);

          }

          function clear_canvas()

          {

          ctx.clearRect(0,0,520,500);

          //canvas.parentNode.removeChild(canvas); //刪除

          }

          function stop_draw(obj){

          clearInterval(obj);

          }

          </script>

          </body>

          </html>

          TML4幾乎沒有繪圖的功能,通常只能顯示已有的圖片;而HTML5則集成了強大的繪圖功能。在HTML5中可以通過下面的方法進行繪圖:

          • ?使用Canvas API動態地繪制各種效果精美的圖形;
          • ?繪制可伸縮矢量圖形(SVG)。

          借助HTML5的繪圖功能,既可以美化網頁界面,也可以實現專業人士的繪圖需求。本書將在第5章介紹使用Canvas API畫圖的方法,游戲開發中主要使用Canvas API畫圖來實現游戲界面。

          【例】要使用Canvas API畫圖實現繪制坦克圖案。

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8"/>

          </head>

          <body>

          <h1>html5-坦克大戰</h1>

          <!--坦克大戰的戰場-->

          <canvas id="tankMap" width="400px"height="300px"style="background-color:black"></canvas>

          <script type="text/javascript">

          //得到畫布

          varcanvas1=document.getElementById("tankMap");

          //定義一個位置變量

          var heroX=80; var heroY=80;

          //得到繪圖上下文

          var cxt=canvas1.getContext("2d");

          //設置顏色

          cxt.fillStyle="#BA9658";

          //左邊的矩形

          cxt.fillRect(heroX,heroY,5,30);

          //右邊的矩形

          cxt.fillRect(heroX+17,heroY,5,30);

          //畫中間的矩形

          cxt.fillRect(heroX+6,heroY+5,10,20);

          //畫出坦克的蓋子

          cxt.fillStyle="#FEF26E";

          cxt.arc(heroX+11,heroY+15,5,0,360,true);

          cxt.fill();

          //畫出炮筒

          cxt.strokeStyle="#FEF26E";

          cxt.lineWidth=1.5;

          cxt.beginPath();

          cxt.moveTo(heroX+11,heroY+15);

          cxt.lineTo(heroX+11,heroY);

          cxt.closePath();

          cxt.stroke();

          </script>

          </body>

          </html>

          瀏覽網頁效果如圖1-5所示。

          如果想要學習視頻,交流討論,請按照下圖所示輸入私信“申請加入”獲取加群鏈接~~~

          天將和大家分享HTML5中canvas元素的使用,有一定參考價值,希望對大家有所幫助。

          【推薦課程:HTML5教程】

          canvas元素

          主要使用 JavaScript 在網頁上繪制圖像畫布是一個矩形區域,可以控制其每一像素而且canvas 擁有多種繪制路徑、矩形、圓形、以及添加圖像的方法,接下來將在文章中為大家詳細介紹

          html代碼

          <canvas id="demo"></canvas>

          矩形

          fillStyle:用來給圖形添加色彩的

          fillRect(x,y,width,height)

          x:距離左上角的x值

          y:距離左上角的y值

          width,height:就是圖形的寬高

          <script type="text/javascript">

          var demo=document.getElementById("demo");

          var fang=demo.getContext("2d");

          fang.fillStyle="pink";

          fang.fillRect(0,0,200,50);

          </script>

          線條

          moveTo:線條開始位置

          lineTo:結束位置

          lineWidth:線條寬度

          strokeStyle:顏色

          stroke:開始繪制

          var demo=document.getElementById("demo");

          var xian=demo.getContext("2d");

          xian.moveTo(10,10);

          xian.lineTo(100,100);

          xian.lineWidth=2;

          xian.strokeStyle="pink";

          xian.stroke();

          圓形

          beginPath():開始路徑

          arc(x,y,r,sAngle,eAngle,counterclockwise)

          x,y:為圓的中心點坐標

          r:圓的半徑

          sAngle,eAngle:圓的起始角和結束角

          counterclockwise:可寫可不寫規定應該逆時針還是順時針繪圖。False=順時針,true=逆時針。

          var demo=document.getElementById("demo");

          var yuan=demo.getContext("2d");

          yuan.beginPath();

          yuan.arc(100,100,50,0,2*Math.PI);

          yuan.strokeStyle="pink";

          yuan.stroke();

          圖形插入

          drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

          sx,sy:剪切的 x,y 坐標位置

          swidth,sheight:被剪切圖像的寬度和高度

          x,y:在畫布上放置圖像的 x,y 坐標位置

          width,height:要使用的圖像的寬度和高度

          var demo=document.getElementById("demo");

          var img1=document.getElementById("img1");

          var img=demo.getContext("2d");

          img1.onload=function(){

          img.drawImage(img1,10,10,100,120)

          總結:以上就是本篇文章的全部內容了,希望通過本篇文章對大家有所幫助。

          以上就是HTML5中canvas元素如何繪制圖形的詳細內容,更多請關注其它相關文章!

          更多技巧請《轉發 + 關注》哦!


          主站蜘蛛池模板: 国产一区玩具在线观看| 中文字幕色AV一区二区三区 | 精品人伦一区二区三区潘金莲| 香蕉一区二区三区观| 日本道免费精品一区二区| 久久99国产精品一区二区| 亚洲一区在线观看视频| 日韩精品国产一区| 亚洲乱码国产一区三区| 亚洲综合色一区二区三区小说| 激情久久av一区av二区av三区| 天堂Aⅴ无码一区二区三区| 亚洲一区二区影视| 天码av无码一区二区三区四区| 国产在线无码一区二区三区视频| 无码国产精品一区二区免费 | 一区二区三区四区在线视频| 国产一区二区三区在线2021 | 国产在线精品一区二区在线看| 综合久久一区二区三区 | 亚洲一区二区三区首页| 色屁屁一区二区三区视频国产| 国产一区麻豆剧传媒果冻精品| 中文乱码字幕高清一区二区| 精品亚洲一区二区三区在线观看| 亚洲视频一区网站| 成人无码AV一区二区| 尤物精品视频一区二区三区 | 无码人妻一区二区三区兔费| 好爽毛片一区二区三区四| 99久久精品日本一区二区免费 | 亚洲综合在线成人一区| 无遮挡免费一区二区三区| 在线观看亚洲一区二区| 久久精品无码一区二区日韩AV | 色一情一乱一伦一区二区三区| 在线播放一区二区| 国产无线乱码一区二三区| 国产成人一区二区三区免费视频 | 亚洲一区二区三区免费视频| 成人区精品一区二区不卡 |