很多知识不用就会忘记，现在因为有了个人网站，所以都可以记录在这里。
现在又的重新温习一下canvas知识了。
// 加载onload 函数
function addEvent(func) {
if (typeof window.onload === "function") {
var origin=window.onload;
window.onload = function () {
alert("zhixing")
origin();
func();
}
} else {
window.onload = function () {
func();
}
}
}
// 画画当然需要画布，所以首先应该获得画布
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。// 参数 2d或者3d
具体用法 ：
var ctx=document.getElementById("MyCanvas").getContext("2d"); // 获得 canvas 对象
开始使用canvas
ctx.beginPath();
// 需要操作的内容
ctx.closePath();
画线
ctx.beginPath();
ctx.moveTo(x1,y1); //开始点坐标
ctx.lineTo(x2,y2);//结束点坐标
ctx.strokeStyle="hsla(360,100%,50%,1)"; // 描边的颜色，第一个数颜色值 hue 色彩0~360，360红色，120绿色，240蓝色， saturation , 饱和度0%~100%，lightness 明度0%~100% ，alpha 透明度 0~1之间
ctx.stroke() // stroke 单词意思描边，我们画的路径，只有描边了才能看见
ctx.closePath();
// 三条线可以拼成一个三角形，我们画三角形可以这么做，
ctx.beginPath();
ctx.moveTo(20,20); //开始点坐标
ctx.lineTo(60,60);//移动到第二个点
ctx.lineTo(20,90);//移动到第三个点
ctx.lineTo(20,20);//回到结束点
ctx.strokeStyle="hsla(360,100%,50%,1)"; // 描边的颜色
ctx.stroke() // 生成路径
ctx.closePath();
画圆
ctx.beginPath();
ctx.arc(x1,y1,radius,startAngle,endAngle,boolean); //x1，y1 表示圆心的x轴坐标和y轴的坐标，radius 表示半径，startAngle 开始的角度 (Math.PI/180*angle) endAngle 结束的角度，是否逆时针
ctx.strokeStyle="hsla(360,100%,50%,1)"; // 描边的颜色
ctx.stroke() // stroke 单词意思描边，我们画的路径，只有描边了才能看见
ctx.fill() // fill 单词意思填充 ，我们画的路径，不描边的话，填充颜色也能看到哦
ctx.closePath();
画矩形