学习HTML5关于Canvas的一些笔记

17892012-01-30

矩形路径   rect(x, y, width, height)

 
ctx.fillRect(25,25,100,100);画方框,默认黑色的
ctx.clearRect(45,45,60,60);清除方框内容
ctx.strokeRect(50,50,50,50);画一个这么大的黑边矩形
代码演示:
<canvas id="canvas" width="150" height="150"></canvas>
<script type="text/javascript">
      var canvas = document.getElementById("canvas"); 获取这个ID的canvas
        var ctx = canvas.getContext("2d"); 
        ctx.fillStyle = "rgb(200,0,0)"; 颜色
        ctx.fillRect (10, 10, 55, 50);
        ctx.fillStyle = "rgba(0, 0, 200,0.4)"; 颜色和透明度
        ctx.fillRect (30, 30, 55, 50);
 </script>
直线
beginPath()开始
closePath()结束
lineTo()画线
stroke()勾边

lineWidth = value 线条宽度
lineCap = type
终点样式buttround square,西安网站建设团队点墨网络竭诚为您服务。默认是 butt
lineJoin = type
交点样式
miterLimit = value

 


fill()填充

 
// 填充三角形
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
// 勾边三角形
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke(); 

弧线 Arcs

 
arc(x, y, radius, startAngle, endAngle, anticlockwise)
x,y 是圆心坐标,radius 是半径,startAngleendAngle 分别是起末弧度(以 x 轴为基准),anticlockwise 为 true 表示逆时针,反之顺时针。
画一个圆形
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.arc(60,65,10,0,Math.PI/2,true); //逆时针,60,65圆心,10半径,0度起始,180度结束
ctx.stroke();
</script>
Math.PI代表180度
var anticlockwise = i%2==0 ? false : true; // 除法运算
 

插入图片

 
 var ctx = document.getElementById('canvas').getContext('2d');
 var img = new Image();
 img.src = 'images/backdrop.png';
 img.onload = function(){
    ctx.drawImage(img,0,0);
    ctx.beginPath();
    ctx.moveTo(30,96);
    ctx.lineTo(70,66);
    ctx.lineTo(103,76);
    ctx.lineTo(170,15);
    ctx.stroke();
 }

基本动画:时钟

 
   <canvas id="canvas" width="350" height="350"></canvas>
 <script type="text/javascript">
      clock(); 
      setInterval(clock,1000); 
    function clock(){ 
      var now = new Date(); 
      var ctx = document.getElementById('canvas').getContext('2d'); 
      ctx.save(); 
      ctx.clearRect(0,0,150,150); 
      ctx.translate(75,75); 
      ctx.scale(0.4,0.4); 
      ctx.rotate(-Math.PI/2); 
      ctx.strokeStyle = "black"; 
      ctx.fillStyle = "white"; 
      ctx.lineWidth = 8; 
      ctx.lineCap = "round"; 
     
      // Hour marks 
      ctx.save(); 
      for (var i=0;i<12;i++){ 
        ctx.beginPath(); 
        ctx.rotate(Math.PI/6); 
        ctx.moveTo(100,0); 
        ctx.lineTo(120,0); 
        ctx.stroke(); 
      } 
      ctx.restore(); 
     
      // Minute marks 
      ctx.save(); 
      ctx.lineWidth = 5; 
      for (i=0;i<60;i++){ 
        if (i%5!=0) { 
          ctx.beginPath(); 
          ctx.moveTo(117,0); 
          ctx.lineTo(120,0); 
          ctx.stroke(); 
        } 
        ctx.rotate(Math.PI/30); 
      } 
      ctx.restore(); 
       
      var sec = now.getSeconds(); 
      var min = now.getMinutes(); 
      var hr = now.getHours(); 
      hr = hr>=12 ? hr-12 : hr; 
     
      ctx.fillStyle = "black"; 
     
      // write Hours 
      ctx.save(); 
      ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec ) 
      ctx.lineWidth = 14; 
      ctx.beginPath(); 
      ctx.moveTo(-20,0); 
      ctx.lineTo(80,0); 
      ctx.stroke(); 
      ctx.restore(); 
     
      // write Minutes 
      ctx.save(); 
      ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec ) 
      ctx.lineWidth = 10; 
      ctx.beginPath(); 
      ctx.moveTo(-28,0); 
      ctx.lineTo(112,0); 
      ctx.stroke(); 
      ctx.restore(); 
       
      // Write seconds 
      ctx.save(); 
      ctx.rotate(sec * Math.PI/30); 
      ctx.strokeStyle = "#D40000"; 
      ctx.fillStyle = "#D40000"; 
      ctx.lineWidth = 6; 
      ctx.beginPath(); 
      ctx.moveTo(-30,0); 
      ctx.lineTo(83,0); 
      ctx.stroke(); 
      ctx.beginPath(); 
      ctx.arc(0,0,10,0,Math.PI*2,true); 
      ctx.fill(); 
      ctx.beginPath(); 
      ctx.arc(95,0,10,0,Math.PI*2,true); 
      ctx.stroke(); 
      ctx.fillStyle = "#555"; 
      ctx.arc(0,0,3,0,Math.PI*2,true); 
      ctx.fill(); 
      ctx.restore(); 
     
      ctx.beginPath(); 
      ctx.lineWidth = 14; 
      ctx.strokeStyle = '#325FA2'; 
      ctx.arc(0,0,142,0,Math.PI*2,true); 
      ctx.stroke(); 
     
      ctx.restore(); 
    } 
 </script>
数据存储
localStorage - 没有时间限制的数据存储,关闭页面仍然存在。
sessionStorage - 针对一个 session 的数据存储,关闭页面删除。
 
hreflang language_code    规定目标 URL 的基准语言。仅在 href 属性存在时使用。
 
全局的链接基本地址
<head>
<base href="http://www.w3school.com.cn/i/" />
</head>

通过本文您对西安网站建设有了进一步了解,本公司温馨提醒:找西安做网站公司,请选择手续齐全、业务精、服务好的正规公司。

工商网上亮照

版权所有:西安点墨网络科技有限公司 信息备案编号: 陕ICP备11004160号-1

客户服务电话:15229292610

公司注册地址:西安市雁塔区融鑫路丽湾蓝岛1幢3单元16层31605号

临时办公地址:西安市雁塔区朱雀大街紫郡长安F3

Sitemap 网站地图 手机版

服务热线:15229292610

客服信箱:vip@dianmo.cc

846461336327

版权所有:西安点墨网络科技有限公司 信息备案编号: 陕ICP备11004160号-1