canvas是html中的一个元素，可以通过js操控绘图！
可以绘制各种图形，各种填充样式！
绘制时可以进行旋转，缩放，平移，但并不是很灵活！
有一对比较好用的方法是save restore！
save 与 restore的作用并不是保存图像，而是恢复到之前的偏移，旋转，缩放状态！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<script>
//全局变量
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
init();
function init(){
document.body.appendChild(canvas);
canvas.width = canvasWidth;
canvas.height = canvasHeight;
canvas.setAttribute('style','background:black;border:5px solid red');//设置边框
} /**绘制矩形快
* in_fileStyle 颜色;
* in_x,in_y 左上角坐标
* in_width,in_height 宽度和高度
*/
function drawRect(in_fileStyle,in_x,in_y,in_width,in_height){
canvasContext.fillStyle=in_fileStyle;
canvasContext.fillRect(in_x,in_y,in_width,in_height);
} /**绘制线条
* in_fileStyle 颜色;
* in_x1,in_y1 起点坐标;
* in_x2,in_y2 终点坐标;
* in_size 线条宽度
*/
function drawLine(in_fileStyle,in_x1,in_y1,in_x2,in_y2,in_size){
canvasContext.beginPath();//重置当前路径 或 开始一条路径
canvasContext.strokeStyle=in_fileStyle;
canvasContext.lineWidth=in_size;
canvasContext.moveTo(in_x1,in_y1);
canvasContext.lineTo(in_x2,in_y2);
canvasContext.stroke();//绘制
}
/**绘制圆圈或实心圆
* in_fileStyle 颜色;
* in_x,in_y 圆心坐标
* in_r 半径
* in_startAngle,in_endAngle 起始角度，结束角度
* in_size 宽度
*/
function drawCircle(in_fileStyle,in_x,in_y,in_r,in_startAngle,in_endAngle,in_size){
canvasContext.beginPath();
canvasContext.strokeStyle=in_fileStyle;
canvasContext.lineWidth=in_size;
canvasContext.arc(in_x,in_y,in_r,in_startAngle,in_endAngle);
canvasContext.stroke();//绘制
}
/**绘制文字
* in_fileStyle 颜色;
* in_x,in_y 左下角坐标
* in_size 大小
* in_fontType 字体
* in_isSolid 是否填充 true or false
* in_text 内容
* in_lineSize 线条宽度
**/
function drawText(in_fileStyle,in_x,in_y,in_size,in_fontType,in_isSolid,in_text,in_lineSize){
canvasContext.strokeStyle=in_fileStyle;
canvasContext.fillStyle=in_fileStyle;
canvasContext.font=in_size + "px " + in_fontType;
if(in_isSolid==true){
canvasContext.fillText(in_text,in_x,in_y);
}else{
canvasContext.lineWidth=in_lineSize;
canvasContext.strokeText(in_text,in_x,in_y);
}
} /**
* 绘制图像,目前此函数是异步绘制，对图层次序不能控制
*/
function drawImge(in_url,in_x,in_y,in_width,in_height){
var stop = false;
var img=new Image();
img.src=in_url;
img.onload = function(){
canvasContext.drawImage(img,in_x,in_y,in_width,in_height);
};
}
/*drawRect("rgba(255,0,0,1)",30,30,720,700);
drawLine("#FF0000",10,10,720,400,13);
drawCircle("#00F0F0",300,300,50,0,2*Math.PI,100);
drawText("#00F0F0",400,500,100,"Arial",false,"HELLO",4);
drawImge("imges/snow.png",0,0,200,200);*/ //随机产生雪花
var snows=[]; //雪花数组
function productSnow(){
// clear the canvas
canvasContext.fillStyle = "rgba(0,0,0,1)";
canvasContext.fillRect(0,0, canvasWidth, canvasHeight);
var snow = new oneSnow(Math.random()*canvasWidth, Math.random()*canvasHeight*0.3,100);
snows.push(snow);
if(snows.length > 100){ //只保留二十个雪花
snows.shift(); //删除第一个雪花
}
//绘制数组中的每一个雪花
for(var i=0;i<snows.length;i++){
snows[i].showSnow().moveToDown();
}
}
//定义一个雪花
function oneSnow(positionX,positionY,snowSize){
this.x=positionX;
this.y=positionY;
this.size=snowSize; //向下运动 y坐标大
this.moveToDown=function(){this.y=this.y+5}
//显示
this.showSnow = function(){
drawImge("imges/snow.png",this.x, this.y,this.size,this.size);
//drawCircle("#00F0F0",this.x,this.y,10,0,2*Math.PI,20);
return this;
}
}
setInterval(productSnow,1000/150);//每个1/3秒调用一次productSnow函数
</script>
</body>
</html>
雪花