<canvas class="canvas" width="200px" height="200px"></canvas>

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d"); ​
cxt.fillStyle="#FF0000"; ​
cxt.fillRect(0,0,150,75); 

function createCanvas(){
document.body.innerHTML = ""
mycanvas =document.getElementByIdx("mycanvas");
context = mycanvas.getContext("2d");
}

function drawRect(){
context.fillStyle="#ff0000";
context.translate(100,200);//移动
context.scale(1,0.5);//缩放
context.rotate(30);//旋转
context.fillRect(0,0,200,200);
}

function drawImage(){
var img = new Image();
img.onload = function(){
context.drawImage(img,0,0);//三个参数图片源对象、摆放的位置
}
img.src = "img/logo.png"
}

function pageLoad(){var c= $('mycanvas');var ctx = c.getContext('2d');ctx.moveTo(20,30);//第一个起点ctx.lineTo(120,90);//第二个点ctx.lineTo(220,60);//第三个点（以第二个点为起点）ctx.lineTo(250,90);//第四个点（以第二个点为起点）ctx.lineWidth=3;ctx.strokeStyle = 'blue';ctx.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。 }　

function pageLoad2(){var can = $('mycanvas');var cans = can.getContext('2d');cans.moveTo(0,0);cans.lineTo(400,300);var grd = cans.createLinearGradient(0,0,400,300);//线性渐变的起止坐标grd.addColorStop(0,'red');//创建渐变的开始颜色，0表示偏移量，个人理解为直线上的相对位置，最大为1，一个渐变中可以写任意个渐变颜色grd.addColorStop(0.5,'green');grd.addColorStop(1,'yellow');cans.lineWidth=20;cans.strokeStyle = grd;cans.stroke(); }

function pageLoad2(){var can = $('mycanvas');var cans = can.getContext('2d');cans.moveTo(0,0);cans.lineTo(400,300);var grd = cans.createLinearGradient(0,0,0,100);//线性渐变的起止坐标grd.addColorStop(0,'red');//创建渐变的开始颜色，0表示偏移量，个人理解为直线上的相对位置，最大为1，一个渐变中可以写任意个渐变颜色grd.addColorStop(0.5,'green');grd.addColorStop(1,'yellow');cans.fillStyle=grd;cans.fillRect(0,0,200,100);
}