1.获得canvas,然后就可以利用context来绘制。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id ="canvas" width="300" height="300"></canvas>
<script type="text/javascript">
var a = document.getElementById("canvas");
var context = a.getContex("2d");
</script>
</body>
</html>
2.一些绘制的方法
context.fillStyle = "#000; //设置颜色填充
context.strokeStyle = "#000"; //设置绘制的颜色
context.rect(x,y,width,height); //一个矩形
context.fillRect(x,y,width,height) //绘制颜色填充的矩形
context.strokeRect(x,y,width,height) //绘制矩形无填充
context.clearRect(x,y,width,height) //清空矩形内的东西
context.arc(x,y,r,sAngle,eAngle,counterclockwise); //绘制圆弧,(x,y)是圆心坐标,r是半径,sAngle,eAngle是起始角度和终止角度(单位为弧度)
//counterclockwise是可选参数顺时针还是逆时针
context.ispointInpath(x,y); //如果点(x,y)位于当前路径中则返回true,否则返回false;
context.scale(scalewidth,scaleheight); //放大或缩小当前的绘图,如果进行了缩放或放大,那么之后的绘图放大或缩放会参照上一次的
context.rotate(angle); //旋转当前的绘图,angle单位为角度
context.transform(a,b,c,d,e,f) //水平缩放倾斜移动当前绘图
context.translate(x,y); //将(x,y)设置为(0,0),即之后的绘图参照从(x,y)
context.beginPath(); //起始一条路径
context.moveTo(x,y); //将点移动到(x,y)
context.lineTo(x,y); //创建一个新的点,然后创建从该点到画布中最后一个点的线条(但是并不会画出来,需要stroke)
context.closePath(); //创建从当前点到起始点的路径(但是并不会画出来,需要stroke)
context.clip(); //剪切一个区域,然后之后的绘制都会在该区域中进行
context.fill(); //填充当前
context.stroke(); //绘制当前
context.font = ""; //设置或返回文本内容的属性
context.textAligh = ""; //设置或返回文本的对其方式
context.fillText(text,x,y); //在(x,y)处绘制填充文本text
context.strokeText(text,x,y); //无填充
context.save(); //保存当前的画布的一些颜色等的设置
context.restore(); //回到当前画布保存的一些颜色等的设置
3.绘制图片
var a = document.getElementById("canvas");
var context = a.getContext("2d");
var image = new Image();
image.onload = function(){
console.log("Loaded image");
context.drawImage(image,0,0);
}
image.src ="123.jpg"; //设置的image的路径,与html文件在同一个文件夹
context.drawImage(img,x,y); //在(x,y)处绘制图片
context.drawImage(img,x,y,weigh,height) //绘制的图片的高和宽