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>