<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>
