可以幫忙看下為什么不出效果嗎？謝謝！
<!DOCTYPE html>
<html>
<head>
? ? <title></title>
</head>
<body>
? ? <canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
? ? ? ? 當(dāng)前瀏覽器不支持，請更換瀏覽器再試！
? ? </canvas>
? ? <script>
? ? ? ? window.onload=function(){
? ? ? ? ? ? var canvas=document.getElementById("canvas");
? ? ? ? ? ? canvas.width=800;
? ? ? ? ? ? canvas.height=800;
? ? ? ? ? ? var context=canvas.getContext("2d");
//繪制圓弧 context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false)
//分別表示 圓心坐標(biāo)x,y 半徑 開始及結(jié)束的角度 是否逆時針繪制（可選 默認(rèn)為順時針）
? ? ? ? ? ? fillRoundRect(context,150,150,500,500,10,"#bbada0");
? ? ? ? ? ? for (var j = 0; j < 4; j++)
? ? ? ? ? ? ? ? for (var i = 0; i < 4; i++)
? ? ? ? ? ? ? ? ? ? fillRoundRect(context,170+i*120,170+j*120,100,100,6,"#ccc0b3");
? ? ? ? }
? ? ? ? function fillRoundRect(ctx,x,y,width,height,r,fillColor) {
? ? ? ? ? ? if (2*r>width || 2*r>height )
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ctx.save();
? ? ? ? ? ? ctx.translate(x, y);
? ? ? ? ? ? pathRoundRect(ctx,width,height,r)
? ? ? ? ? ? ctx.fillStyle = fillColor || "black";//沒有填充就設(shè)為black,這里fillColor參數(shù)可選
? ? ? ? ? ? ctx.fill();
? ? ? ? ? ? ctx.restore();
? ? }
? ? ? ? function strokeRoundRect(ctx,width,height,r,lineWidth,strokeColor) {
? ? ? ? ? ? if (2*r>width || 2*r>height )
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? cxt.save();
? ? ? ? ? ? cxt.translate(x,y);
? ? ? ? ? ? pathRoundRect(ctx,width,height,r);
? ? ? ? ? ? cxt.lineWidth=lineWidth || 1;
? ? ? ? ? ? cxt.strokeStyle=strokeColor || "black";
? ? ? ? ? ? cxt.stroke();
? ? ? ? ? ? cxt.restore();
? ? }
? ? ? ? function pathRoundRect(ctx,width,height,r) {
? ? ? ? ? ? cxt.save();
? ? ? ? ? ? cxt.beginPath();
? ? ? ? ? ? ctx.arc(width-r, height-r, r, 0,Math.PI/2 );//右下角圓弧 順時針90度
? ? ? ? ? ? ctx.lineTo(r, height);
? ? ? ? ? ? ctx.arc(r, height-r, r, Math.PI/2,Math.PI);//左下角直線
? ? ? ? ? ? ctx.lineTo(0, r);
? ? ? ? ? ? ctx.arc(r, r, r, Math.PI, Math.PI*3/2);
? ? ? ? ? ? ctx.lineTo(width-r,0);
? ? ? ? ? ? ctx.arc(width-r, r, r, Math.PI*3/2, Math.PI*2);
? ? ? ? ? ? ctx.closePath();
? ? ? ? ? ? cxt.restore();
? ? }
? ? </script>
</body>
</html>
2016-10-16
cxt ?有錯誤 ，你看看, 有的地方寫成了ctx