首页 > 代码库 > html5基础w3c

html5基础w3c

2024-10-25 11:31:02   208人阅读

来源：

http://www.w3school.com.cn/html5/index.asp

----------------------------

 

 

 

----------------------------------------------

画布

绘制填充矩形

<!DOCTYPE html><html><head><title></title></head><body><canvas id="myCanvas" width="200" height="100"></canvas>   //canvas元素  <script type="text/javascript">var c=document.getElementById("myCanvas");  //获取canvas元素var cxt=c.getContext("2d");    //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法.cxt.fillStyle="#FF0000";       //fillStyle 方法将其染成红色cxt.fillRect(0,0,150,75);      //fillRect 方法规定了形状、位置和尺寸.       0,0 坐上坐标   150,75右下坐标（相对坐标）</script></body></html>

 

线条

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);     //绘制线条的起始位置（10,10）   相对于canvas框内的左上位置为初始位置（0,0）
cxt.lineTo(150,50);　　//绘制线条到坐标点150,50   相对于canvas起始位置  x坐标150  y坐标50cxt.lineTo(10,50);    //绘制线条到坐标点10,50    相对于canvas起始位置  x坐标10  y坐标50
cxt.stroke();          //执行绘制线条</script>

 

圆形

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script>

 

渐变

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);</script>

 

 

图像

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image()img.src="flower.png"cxt.drawImage(img,0,0);</script>

 

 

获取坐标位置  无html5元素

<!DOCTYPE HTML><html><head><style type="text/css"> body{font-size:70%;font-family:verdana,helvetica,arial,sans-serif;}</style><script type="text/javascript"> function cnvs_getCoordinates(e){x=e.clientX;y=e.clientY;document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";} function cnvs_clearCoordinates(){document.getElementById("xycoordinates").innerHTML="";}</script></head><body style="margin:0px;"><p>把鼠标悬停在下面的矩形上可以看到坐标：</p><div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onm ousemove="cnvs_getCoordinates(event)" onm ouseout="cnvs_clearCoordinates()"></div><br /><br /><br /><div id="xycoordinates"></div>  </body></html>

 

html5基础w3c


联系
我们