可以帮忙看下为什么不出效果吗？谢谢！
Haogjin
2016-10-16 09:58
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
当前浏览器不支持，请更换浏览器再试！
</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)
//分别表示 圆心坐标x,y 半径 开始及结束的角度 是否逆时针绘制（可选 默认为顺时针）
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";//没有填充就设为black,这里fillColor参数可选
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>
1回答
-
- 鬼谷子钢
- 2016-10-16 12:27:19
cxt 有错误 ，你看看, 有的地方写成了ctx
Canvas绘图详解
72881 学习 · 422 问题
相似问题