canvas基础学习

来源：互联网发布：led屏幕软件下载编辑：程序博客网时间：2024/06/06 13:14

1.Canvas元素
canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。
在矩形区域的画布上，控制其每一像素，JavaScript 来绘制 2D图形，逐像素进行渲染。可以通过多种方法使用canvas 元素绘制路径、矩形、圆形、字符以及添加图像。
2.创建canvas

<canvas id="myCanvas" width="300" height="300"></canvas>

3.绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

<!DOCTYPE html><html><head><meta charset="utf-8"><title>demo</title></head><style type="text/css">.myCanvas{border:1px solid #d3d3d3;}</style><body><canvas id="myCanvas" class="myCanvas" width="300" height="150"></canvas></body></html><script type="text/javascript">var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.rect(20,20,150,100);ctx.stroke();</script>

4.使用canvas制作时钟案例

canvasAPI地址：点击打开链接

<!DOCTYPE html>  <html>  <head>  <meta charset="utf-8">  <title>canvas clock</title>  </head>  <style type="text/css">  div{     text-align: center;     margin-top: 250px;}#clock{border:1px solid #d3d3d3;}</style>  <body>      <div>        <canvas id="clock" width="200" height="200"></canvas>         </div></body>  </html>    <script type="text/javascript">  var c=document.getElementById("clock");  var ctx=c.getContext("2d");var width=ctx.canvas.width;var height=ctx.canvas.height;var r=width / 2;//背景  function drawBackGround(){    //保存当前状态    ctx.save();    ctx.translate(r,r);    ctx.beginPath();    ctx.lineWidth=10;    ctx.arc(0, 0, r-5, 0, 2 * Math.PI, false);    ctx.stroke();    var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];    ctx.font='18px Arial';    ctx.textAlign='center';    ctx.textBaseline = 'middle';    hourNumbers.forEach(function(number,i){        var rad = 2 * Math.PI / 12 * i;        var x = Math.cos(rad) * (r - 30);        var y = Math.sin(rad) * (r - 30);        ctx.fillText(number, x, y);    })    for(var i=0; i<60; i++){      var rad = 2 * Math.PI / 60 * i;      var x = Math.cos(rad) * (r - 18);      var y = Math.sin(rad) * (r - 18);      ctx.beginPath();      if(i%5==0){          ctx.fillStyle="#000"          ctx.arc(x,y,2,0,2 * Math.PI, false);      }else{          ctx.fillStyle="#eee"          ctx.arc(x,y,2,0,2 * Math.PI, false);      }      ctx.fill();    }}//时针function drawHour(hour,minute){     //保存当前状态     ctx.save();     ctx.beginPath();     var rad = 2 * Math.PI / 12 * hour;     var mrad = 2 * Math.PI / 12 / 60 * minute;     ctx.rotate(rad+mrad);     ctx.lineWidth = 6;     ctx.lineCap = 'round';     ctx.moveTo(0, 10);     ctx.lineTo(0,-r / 2)     ctx.stroke();     //回到之前状态     ctx.restore();}//分针function drawMinute(minute){    ctx.save();    ctx.beginPath();    var rad= 2 * Math.PI / 60 * minute;    ctx.rotate(rad);    ctx.lineWidth = 3;    ctx.lineCap='round';    ctx.moveTo(0,10);    ctx.lineTo(0,-r + 30);    ctx.stroke();ctx.restore();}//秒针function drawSecond(second){     ctx.save();     ctx.beginPath();     ctx.fillStyle='#c14543';     var rad= 2 * Math.PI / 60 * second;     ctx.rotate(rad);     ctx.moveTo(-2,20);     ctx.lineTo(2,20);     ctx.lineTo(1, -r+18);     ctx.lineTo(-1, -r+18);     ctx.fill();     ctx.restore();}//中心原点function drawDot(){     ctx.beginPath();     ctx.fillStyle = '#fff';     ctx.arc(0,0,3,0,2*Math.PI,false);     ctx.fill();}//获取当前时间绘制时钟function draw(){     //清除内容     ctx.clearRect(0,0,width,height);var now=new Date();var hour=now.getHours();var minute =now.getMinutes();var second=now.getSeconds();drawBackGround();drawHour(hour,minute)drawMinute(minute);drawSecond(second);drawDot();     //回到原点为(0,0)的状态ctx.restore();}draw();setInterval(draw,1000);</script>

0 0