画布

# HTML 5#
### 2015-9-9知识点总结 ###
##画布:##
<p>一个页面可以有多个画布</p>
    <canvas id="cs" width="1000" height="800"></canvas>
    //不能用margin:auto设置左右居中
    <script>
        var cs=document.getElementById("cs");
        var context=cs.getContext();  //获取画笔;
        context.fillStyle = "red";  //设置填充色
        context.strokeStyle = "blue";  //设置填充边框颜色
        context.lineWidth = 2;  //设置线条的宽度
        
        function drawShadow(){}
            context.shadowBlur = 15;  //设置阴影模糊级别
               context.shadowColor = "black";  //绘制有阴影的颜色
        }
        drawShadow();

        //绘制有渐变的图形
        var linearGradient = context.createLinearGradient(10,10,110,10);
        linearGradient.addColorStop(0,"white");
        linearGradient.addColorStop(0.5,"red");
        linearGradient.addColorStop(1,"white");
        context.fillStyle = linearGradient;

        //绘制矩形 
        context.fillRect(10,10,100,50);  //绘制“被填充”的矩形
        context.strokeRect(120,10,100,50); //绘制矩形（无填充）
        context.fillStyle = "red";        //绘制“被填充”的矩形颜色
        context.rect(230,10,100,50); //绘制矩形
        context.fill();
        context.stroke();


        function drawArc(num){ //绘制圆形
            context.fillStyle = "rgba(255,0,0,0.5)";
            context.beginPath();  //重置路径，开始新的路径
            context.arc(100+num*100,150,50,0,2*Math.PI); //绘制圆形
            context.fill();  //填充            
            context.stroke(); //绘制已定义的路径
        }
    
        function drawLine(){//绘制路径
            context.save();  
            context.scale(1.5,1.5);  //缩放当前绘图至更大或更小
            context.beginPath();  //起始一条路径，或重置当前路径
            context.strokeStyle = "green" //绘制矩形（无填充)颜色
            context.moveTo(200,250); //起始位置
            context.lineTo(150,300);  //线条路劲
            context.lineTo(250,300);
            context.closePath();   //创建从当前点回到起始点的路径
            context.restore(); //重置所有的设置
        }
        drawLine();

        function drawBezier(){ //创建贝塞尔曲线
            context.strokeStyle = "black";
            context.beginPath();
            context.moveTo(200,100);
            context.quadraticCurveTo(450,250,200,550); //创建二次贝塞尔曲线
            context.bezierCurveTo(450,150,150,350,200,550); //创建三次方贝塞尔曲线
            context.stroke();

        }
        
        function drawImage(){  //向画布上绘制图像、画布或视频
            img1.onload = function(){

                var x = 1;

                setInterval(function(){
                   console.log(1);
                    context.save();
                    context.translate(725,225); //设置画布上的 (0,0) 位置
                    context.rotate(Math.PI/180*x); //设置旋转角度
                    //绘制图片
                    context.drawImage(img1,-125,-125,250,250); //在画布上定位图像
                    context.restore();
                    x++;
                },10)  //没1/100秒旋转 pi/180的角度
            }

        }

        drawImage();


    </script>