# canvas基础学习（三）-曲线的绘制

350人阅读 评论(0)

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title></title>
<body>
<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
你当前的浏览器不支持canvas，请更换浏览器再试。
</canvas>

<script>

var canvas = document.getElementById("canvas");

canvas.height = 600;
canvas.width = 800;

var context = canvas.getContext("2d");

//arcTo
context.beginPath();
context.moveTo(150, 150);
context.arcTo(650, 150, 650, 650, 300);

context.lineWidth = 6;
context.strokeStyle ="#FF0000";
context.stroke();

//baseLine
context.beginPath();
context.moveTo(150, 150);
context.lineTo(650, 150);
context.lineTo(650, 650);

context.lineWidth = 2;
context.strokeStyle = "gray";
context.stroke();

}
</script>

</body>
</html>


<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title></title>
<body>
<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
你当前的浏览器不支持canvas，请更换浏览器再试。
</canvas>

<script>

var canvas = document.getElementById("canvas");

canvas.height = 600;
canvas.width = 800;

var context = canvas.getContext("2d");

drawRoundRect(context, 100,100,600,400,50);

}

function drawRoundRect(cxt, x, y, width, height, radius){

cxt.save();
cxt.translate(x, y);
cxt.strokeStyle = "black";
cxt.stroke();
cxt.restore();

}

cxt.beginPath();
cxt.closePath();

}
</script>

</body>
</html>


<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title></title>
<body>
<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
你当前的浏览器不支持canvas，请更换浏览器再试。
</canvas>

<script>

var canvas = document.getElementById("canvas");

canvas.height = 800;
canvas.width = 800;

var context = canvas.getContext("2d");

fillMoon(context, 2, 300, 300, 300, 30);
}

function fillMoon(cxt, d, x, y, R, rot, /*option*/fillColor){
cxt.save();
cxt.translate(x, y);
cxt.rotate(rot*Math.PI/180);
cxt.scale(R, R);
pathMoon(cxt, d);
cxt.fillStyle = fillColor || "#fb5";
cxt.fill();
cxt.restore();
}

function pathMoon(cxt, d){
cxt.beginPath();
cxt.arc(0, 0, 1, 0.5*Math.PI, 1.5*Math.PI, true);//绘制圆弧的外弧
cxt.moveTo(0, -1);
cxt.arcTo(d, 0, 0, 1, dis(0, -1, d, 0)/d);
cxt.closePath();
}

function dis(x1, y1, x2, y2){
return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
}

</script>

</body>
</html>


<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title></title>
<body>
<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
你当前的浏览器不支持canvas，请更换浏览器再试。
</canvas>

<script>
var canvas = document.getElementById("canvas");

canvas.width = 1000;
canvas.height = 600;

var context = canvas.getContext("2d");

//var skyStyle = context.createLinearGradient(0, 0, 0, canvas.height);//线性渐变
context.fillStyle = skyStyle;
context.fillRect(0,0,canvas.width,canvas.height);

for(var i = 0; i < 200; i ++){
var r = Math.random()*5+5;
var x = Math.random()*canvas.width;
var y = Math.random()*canvas.height*0.65;
var a = Math.random()*360;
var dis = Math.min(x,canvas.width-x,y,canvas.height-y);
if(dis >= r){
drawStar(context, r, x, y, a);
}

}

fillMoon(context, 2, 600, 100, 50, 40);
drawLand(context);

}

function drawLand(cxt){
cxt.save();

cxt.beginPath();
cxt.moveTo(0, 400);
cxt.bezierCurveTo(540, 400, 660, 600, 1000, 500);
cxt.lineTo(1200, 800);
cxt.lineTo(0, 800);
cxt.closePath();

var landStyle = cxt.createLinearGradient(0, 800, 0, 0);
cxt.fillStyle = landStyle;

cxt.fill();

cxt.restore();
}

function drawStar(cxt, R, x, y, rot){

cxt.save();

cxt.translate(x,y);
cxt.rotate(rot/180*Math.PI);
cxt.scale(R,R);

starPath(cxt);

cxt.fillStyle = "#fd5";
//				cxt.strokeStyle = "#fd5";
//				cxt.lineWidth = 3;
//				cxt.lineJoin = "round";

cxt.fill();
//cxt.stroke();

cxt.restore();

}
function starPath(cxt){
cxt.beginPath();
for(var i = 0; i < 5; i ++){
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),
-Math.sin((18+i*72)/180*Math.PI));
cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
-Math.sin((54+i*72)/180*Math.PI)*0.5)
}
cxt.closePath();
}

function fillMoon(cxt, d, x, y, R, rot, /*option*/fillColor){
cxt.save();
cxt.translate(x, y);
cxt.rotate(rot*Math.PI/180);
cxt.scale(R, R);
pathMoon(cxt, d);
cxt.fillStyle = fillColor || "#fb5";
cxt.fill();
cxt.restore();
}

function pathMoon(cxt, d){
cxt.beginPath();
cxt.arc(0, 0, 1, 0.5*Math.PI, 1.5*Math.PI, true);//绘制圆弧的外弧
cxt.moveTo(0, -1);
cxt.arcTo(d, 0, 0, 1, dis(0, -1, d, 0)/d);
cxt.closePath();
}

function dis(x1, y1, x2, y2){
return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
}

</script>

</body>
</html>


0
0

个人资料
• 访问：75756次
• 积分：1503
• 等级：
• 排名：千里之外
• 原创：68篇
• 转载：58篇
• 译文：0篇
• 评论：11条
最新评论