HTML5 canvas画布

1、添加canvas元素：

<canvas id="myCanvas" width="200" height="100"></canvas>

2、在javascript中进行绘制：

var c=document.getElementById("myCanvas");//通过id寻找canvas元素
var cxt=c.getContext("2d");//创建context对象

//绘制红色矩形
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

//绘制线段

cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke();

//绘制曲线，quadraticCurveTo(cpx,cpy,x,y)中，cpx，cpy表示控制点的坐标, x，y表示终点坐标；

ctx1.beginPath();
ctx1.moveTo(450,230);
ctx1.quadraticCurveTo(500,300,550,230);
ctx1.stroke();

//绘制圆形

cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill();

  
  
  
  

   
   
   
   //绘制渐变色圆形
  
  
  
  

var grd= ctx.createLinearGradient(0,0,150,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
ctx.beginPath();
ctx.fillStyle=grd;ctx.arc(100,100,100,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

//插入图片

    
    
    
    

    
    
    
    

     
     
     
     
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
     
     
     
     

     
     
     
     
//绘制圆弧
     
     
     
     
ctx1.beginPath();
var x = 500;               // x 坐标值
var y = 220;               // y 坐标值
var radius = 60;                    // 圆弧半径
var startAngle =60;                     // 开始点
var endAngle =220; // 结束点
var anticlockwise = 3.5%2==0 ? false : true; // 顺时针或逆时针
ctx1.arc(500, y, radius, startAngle, endAngle, anticlockwise);
ctx1.fill();

     
     
     
     
//绘制椭圆
     
     
     
     
      
      
      
      

       
       
       
                var canvas;
      
      
      
      
      
      
      
      

       
       
       
                var ctx;
      
      
      
      
      
      
      
      

       
       
       
                canvas = document.getElementById("myCanvas1");
      
      
      
      
      
      
      
      

       
       
       
                ctx = canvas.getContext("2d");
      
      
      
      
      
      
      
      

       
       
       
                ctx.strokeStyle = "#fff";
      
      
      
      
      
      
      
      

       
       
       
                function drawEllipse(x, y, w, h) {
      
      
      
      
      
      
      
      

       
       
       
                    var k = 0.5522848;
      
      
      
      
      
      
      
      

       
       
       
                    var ox = (w / 2) * k;
      
      
      
      
      
      
      
      

       
       
       
                    var oy = (h / 2) * k;
      
      
      
      
      
      
      
      

       
       
       
                    var xe = x + w;
      
      
      
      
      
      
      
      

       
       
       
                    var ye = y + h;
      
      
      
      
      
      
      
      

       
       
       
                    var xm = x + w / 2;
      
      
      
      
      
      
      
      

       
       
       
                    var ym = y + h / 2;
      
      
      
      
      
      
      
      

       
       
       
                    ctx.beginPath();
      
      
      
      
      
      
      
      

       
       
       
                    ctx.moveTo(x, ym);
      
      
      
      
      
      
      
      

       
       
       
                    ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
      
      
      
      
      
      
      
      

       
       
       
                    ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
      
      
      
      
      
      
      
      

       
       
       
                    ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
      
      
      
      
      
      
      
      

       
       
       
                    ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
      
      
      
      
      
      
      
      

       
       
       
                    ctx.stroke();
      
      
      
      
      
      
      
      

       
       
       
                }
      
      
      
      
      
      
      
      

       
       
       
                ctx.clearRect(0,0,canvas.width,canvas.height);
      
      
      
      
      
      
      
      

       
       
       
                drawEllipse(10, 10, 40, 82);