HTML5之Canvas基础

        <script type="text/javascript">
                var canvasDom=document.getElementById("demoCanvas");//获取canvas元素
                var context=canvasDom.getContext("2d");//获取canvas的context对象，一切操作都是在context对象上完成的
//            
//            //绘制不填充矩形
//            context.strokeStyle="red"; //设置线条的颜色样式
//            context.strokeRect(10,10,190,100);//绘制并指定位置
//            //绘制填充矩形
//            context.fillStyle="blue";
//            context.fillRect(110,110,100,100)
//            
//            //绘制线条
//            context.beginPath(); //开始路径绘制
//            context.moveTo(20,20);//设置起点
//            context.lineTo(200,200);//从起点绘制一条到(200,20)的直线
//            context.lineTo(400,20);
//            context.closePath();//绘制一条到从最后一点到起点的直线
//            context.lineWidth=2.0;//设置线条宽度
//            context.strokeStyle="#CC0000";//设置线条颜色
//            context.stroke();//开始绘制，只有调用这个方法后才可见
////            context.moveTo(100,100);
//            //绘制文字
//            context.font="Bold 50px Arial"; //设定字体
//            context.textAlign="left";//对齐方式 
//            context.fillStyle="#005600";//填充颜色
//            context.fillText("Hello world",100,50);//填充文字和位置
//            //绘制空心字
//            context.strokeText("你好",10,100)
//            //绘制圆形和椭圆 arc方法x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度
//            //用弧度表示。 anticlockwise表示做图时顺时针还是逆时针
//            context.arc(60,60,50,0,Math.PI*2,true);
//            context.lineWidth=2.0;
//            context.strokeStyle="#000";
//            context.stroke();
            //绘制图片
            var image=new Image();
            image.src="black.jpg";
            image.onload=function(){
                for(var i=0;i<10;i++){
                    context.drawImage(image,100+i*80,100+i*80)
                }
            }
        </script>