使用canvas的基本格式前面已经说过了,这里不再累赘,直接上代码:
window.onload=function(){ var myCanvas = document.getElementById("myCanvas");//获取canvas对象 if(myCanvas.getContext("2d")){//判断浏览器是否支持canvas标签 var context = myCanvas.getContext("2d");//获取画布context的上下文环境 //设置canvas的宽度和高度 myCanvas.width=500; myCanvas.height=500; //画一个矩形 drawRect(context,0,0,400,400,10,"#005588","yellow"); drawRect2(context,50,50,400,400,10,"#005588","rgba(0,256,0,0.5)");//后面绘制的图形遮挡前面绘制的图形 }else{ alert("您的浏览器不支持canvas,请换个浏览器试试"); } }; /** *该方法用来绘制一个矩形 *@param cxt:画布的上下文环境 *@param x:矩形起点x坐标 *@param y:矩形起点y坐标 *@param width:矩形的宽度 *@param height:矩形的高度 *@param borderWidth:边框线粗细 *@param borderColor:边框线颜色 *@param fillColor:填充色 **/ function drawRect(cxt,x,y,width,height,borderWidth,borderColor,fillColor){ cxt.beginPath(); cxt.moveTo(x,y);//左上角的第一个点坐标 cxt.lineTo(x+width,y);//右上角的第二个点坐标 cxt.lineTo(x+width,y+height);//右下角的第三个点坐标 cxt.lineTo(x,y+height);//左下角的第四个点坐标 cxt.closePath(); cxt.lineWidth = borderWidth;//边框线粗细 cxt.strokeStyle=borderColor;//边框线颜色 cxt.fillStyle=fillColor;//填充色 cxt.fill();//先填充后描边,边框粗细为10,若反过来先描边后填充则为5,因为里面的边框被填充色覆盖了。 cxt.stroke(); } /** *该方法用来绘制一个矩形 *@param cxt:画布的上下文环境 *@param x:矩形起点x坐标 *@param y:矩形起点y坐标 *@param width:矩形的宽度 *@param height:矩形的高度 *@param borderWidth:边框线粗细 *@param borderColor:边框线颜色 *@param fillColor:填充色 **/ function drawRect2(cxt,x,y,width,height,borderWidth,borderColor,fillColor){ cxt.beginPath(); cxt.rect(x,y,width,height); cxt.closePath(); cxt.lineWidth = borderWidth;//边框线粗细 cxt.strokeStyle=borderColor;//边框线颜色 cxt.fillStyle=fillColor;//填充色 cxt.fill();//先填充后描边,边框粗细为10,若反过来先描边后填充则为5,因为里面的边框被填充色覆盖了。 cxt.stroke(); }
感谢老师!