HTML5 画布canvas应用方式

日期:2020-10-11 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

canvas 元素应用 JavaScript 在网页页面绘图图象,自身是沒有制图工作能力。

canvas 是1个矩形框地区,能够操纵其每像素。

canvas 有着多种多样绘图相对路径、矩形框、圆形、标识符和加上图象的方式。

下面来做几个示例:

1、填充画布

JavaScript Code拷贝內容到剪贴板
  1. <canvas id="myCanvas" width="200" height="100" style="border:1px solid red;"></canvas>   
  2. <script type="text/javascript">   
  3. var c=document.getElementById("myCanvas");   
  4. var cxt=c.getContext("2d");   
  5. cxt.fillStyle="#ccc";   
  6. cxt.fillRect(5,10,150,60); //x,y,x,y   
  7. </script>   
  8.   

实行以下:

2、获得座标

JavaScript Code拷贝內容到剪贴板
  1. <script type="text/javascript">    
  2.  function cnvs_getCoordinates(e){   
  3.    x=e.clientX;   
  4.    y=e.clientY;   
  5.    document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; }   
  6.  function cnvs_clearCoordinates(){   
  7.    document.getElementById("xycoordinates").innerHTML="";}   
  8. </script>   
XML/HTML Code拷贝內容到剪贴板
  1. <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>  
  2. <div id="xycoordinates"></div>  
  3.   

实行以下:

3、绘图线条、图型

 1)、绘图正方形以下:

JavaScript Code拷贝內容到剪贴板
  1. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">   
  2.  您的访问器不适用 canvas 标识.   
  3. </canvas>   
  4.   
  5. <script type="text/javascript">   
  6.   
  7. var c=document.getElementById("myCanvas");   
  8. var cxt=c.getContext("2d");   
  9. cxt.moveTo(10,10); //x,y 起始点   
  10. cxt.lineTo(10,50); //x,y   
  11. cxt.lineTo(50,50); //x,y   
  12. cxt.lineTo(50,10); //x,y   
  13. cxt.lineTo(10,10); //x,y   
  14. cxt.stroke();   
  15. </script>   
  16.   

 实行以下

2)、绘图圆形以下:

JavaScript Code拷贝內容到剪贴板
  1. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">   
  2. 你的访问器不适用canvas    
  3. </canvas>   
  4.   
  5. <script type="text/javascript">   
  6. var c=document.getElementById("myCanvas");   
  7. var cxt=c.getContext("2d");   
  8. cxt.fillStyle="#ccc";   
  9. cxt.beginPath();   
  10. cxt.arc(20,20,10,0,Math.PI*2,true);   
  11. cxt.closePath();   
  12. cxt.fill();   
  13. </script>   
  14.   

实行以下:

4、绘图渐变色

JavaScript Code拷贝內容到剪贴板
  1. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">   
  2. 您的访问器不适用 canvas 标识.   
  3. </canvas>   
  4.   
  5. <script type="text/javascript">   
  6. var c=document.getElementById("myCanvas");   
  7. var cxt=c.getContext("2d");   
  8. var grd=cxt.createLinearGradient(0,0,175,50);   
  9. grd.addColorStop(0,"#000000"); //黑   
  10. grd.addColorStop(1,"#FFFFFF"); //白   
  11. cxt.fillStyle=grd;   
  12. cxt.fillRect(5,10,175,50);//x,y,x,y   
  13. </script>   
  14.   

实行以下:

5、照片

JavaScript Code拷贝內容到剪贴板
  1. <canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">   
  2. 您的访问器不适用 canvas 标识.   
  3. </canvas>   
  4.   
  5. <script type="text/javascript">   
  6. var c=document.getElementById("myCanvas");   
  7. var cxt=c.getContext("2d");   
  8. var img=new Image()   
  9. img.src="aa.png"  
  10. cxt.drawImage(img,10,20); //x,y   
  11. </script>   
  12.   

 实行以下:

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。

原文:http://www.cnblogs.com/LoveSuk/archive/2016/03/17/5288368.html