<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("canvas");
canvas.width=800;
canvas.height=800;
var context=canvas.getContext("2d");
drawRect(context,100,100,400,400,"#046","pink");
drawRect1(context,300,300,300,300,"#000","red");
drawRect2(context,400,400,300,300,"#abc","blue");
}
function drawRect(cxt,x,y,width,height,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.fillStyle = fillColor;
cxt.strokeStyle = borderColor;
cxt.fill();
cxt.stroke();
}
function drawRect1(cxt,x,y,width,height,borderColor,fillColor){
cxt.beginPath();
cxt.rect(x,y,width,height);
cxt.closePath();
cxt.lineWidth=borderWidth;
cxt.fillStyle=fillColor;
cxt.strokeStyle=borderColor;
cxt.fill();
cxt.stroke();
}
function drawRect2(cxt,x,y,width,height,borderColor,fillColor){
cxt.lineWidth=borderWidth;
cxt.fillStyle=fillColor;
cxt.strokeStyle=borderColor;
cxt.fillRect(x,y,width,height);
cxt.strokeRect(x,y,width,height);
}
</script>
应该这样:
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.fillStyle = fillColor;
cxt.strokeStyle = borderColor;
cxt.fill();
cxt.stroke();
}
调用:drawRect(context,100,100,400,400,10,"#046","pink");
drawRect里面 cxt.lineWidth = borderWidth; borderWidth 你没设值
drawRect里面你没有写borderWidth及其值,你看看是不是