html5canvas 简单的那些事儿

var canvas = document.getElementById("canvas");

var cxt = canvas.getContext("2d");

//画线(用线画三角型)

cxt.strokeStyle = "red";//线作色

cxt.lineTo(59, 59);//线的起点

cxt.lineTo(20, 20);

cxt.lineTo(59, 20);

cxt.closePath();//可以用closePath()将你画的图形封闭起来

cxt.stroke();



//画圆

//如果是rgba(1,2,3,4)第四个参数是不透明度

//绘制实心圆

cxt.beginPath();

cxt.arc(100, 100, 50, 0, Math.PI * 2, false); //arc(起始x，起始y，半径，起始角度，终止角度，是否是逆时针)

cxt.closePath();

cxt.fillStyle = "rgb(250,0,0)";

cxt.fill();

//绘制空心圆

cxt.beginPath();

cxt.arc(200,100, 50, Math.PI * 2, false); //arc(x,y,半径,)

cxt.closePath();

cxt.strokeStyle = "rgb(250,0,0)";

cxt.stroke();

//画圆弧(画空心圆弧和空心圆一样同上)

cxt.beginPath();

cxt.strokeStyle = colors[1];

cxt.beginPath();

cxt.moveTo(200,200);//画圆弧的时候必须先给个起点，不然会找不到起点,会画不出圆来。用lineTo(x,y)也一样

cxt.arc(200, 200, 50, Math.PI*0, Math.PI/3, false);//arc(起始x，起始y，半径，起始角度，终止角度，是否是逆时针)

cxt.closePath();

cxt.fill();

//设置阴影部分

cxt.beginPath();

cxt.fillStyle = "rgb(0,255,255)";

cxt.shadowOffsetX = 30; //设置水平位移,就是阴影部分的宽度

cxt.shadowOffsetY = 30; // 设置垂直位移 ,就是阴影部分的长度

cxt.shadowBlur = 10; // 设置模糊度,值越大模糊越厉害。

cxt.shadowColor = "rgba(0,0,0,0.5)"; //设置阴影部分颜色

cxt.fillRect(300, 300, 100, 100);

cxt.closePath();

cxt.fill();

//设置字体，并设置艺术字效果

cxt.beginPath();

cxt.font = "Bold 40px Arial";//设置字体样式

cxt.textAlign = "left";// 设置对齐方式

cxt.fillStyle = "#008600"; // 设置填充颜色

cxt.shadowOffsetX =4; //设置水平位移,就是阴影部分的宽度

cxt.shadowOffsetY =5.5; // 设置垂直位移 ,就是阴影部分的长度

cxt.shadowBlur = 7; // 设置模糊度,值越大模糊越厉害。

cxt.shadowColor = "rgba(0,0,0,0.5)"; //设置阴影部分颜色

cxt.fillText("Hello!", 600, 400); // 设置字体内容，以及在画布上的位置fillText(字体,x坐标,y坐标)

cxt.strokeText("Hello!", 740, 400); // 绘制空心字

cxt.closePath();

//设置渐变

var myGradient = cxt.createLinearGradient(500, 100, 600, 250);//createLinearGradient(起始x,起始y,终止x,终止y)

myGradient.addColorStop(1, "#ffffff");//addColorStop(0是起始1是终止颜色,颜色)

myGradient.addColorStop(0, "#000000");

cxt.fillStyle = myGradient;//用myGradient变量来填充矩形颜色

cxt.fillRect(500, 100, 100, 150);//fillRect()绘制矩形

cxt.closePath();

cxt.fill();