一、曲線繪制
context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false);
其中，（centerx,centery）代表繪制的中心點坐標，radius代表曲線半徑，startingAngle,endingAngle,分別代表繪制的起始位置和結束位置，anticlockwise=false代表按順時針繪制（不設置時默認為順時針繪制），示例如下：
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=1024;
canvas.height=768;
var context=canvas.getContext('2d');
//繪制多段弧線
context.lineWidth=5;
context.strokeStyle="#005588";
for(var i=0;i<10;i++){
context.beginPath();
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.closePath();//會自動將畫好的圖形首尾連接起來
context.stroke();
}
for(var i=0;i<10;i++){
context.beginPath();
context.arc(50+i*100,150,40,0,2*Math.PI*(i+1)/10);
context.stroke();
}
//逆時針
for(var i=0;i<10;i++){
context.beginPath();
context.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true);
context.closePath();//會自動將畫好的圖形首尾連接起來
context.stroke();
}
for(var i=0;i<10;i++){
context.beginPath();
context.arc(50+i*100,420,40,0,2*Math.PI*(i+1)/10,true);
context.stroke();
}
//填充
context.fillStyle="#005588"
for(var i=0;i<10;i++){
context.beginPath();
context.arc(50+i*100,540,40,0,2*Math.PI*(i+1)/10,true);
context.closePath();
context.stroke();
context.fill();
}
}
</script>
二、繪制圓角矩形
圓角矩形繪制思路.jpg
示例代碼如下：
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
drawRoundRect(context,100,100,600,500,50);
}
//繪制（x,y)代表左上角的位置 width,height代表矩形的寬高）
function drawRoundRect(cxt,x,y,width,height,radius){
cxt.save();
cxt.translate(x,y);
pathRoundRect(cxt,width,height,radius);
cxt.strokeStyle="black";
cxt.stroke();
cxt.restore();
}
function pathRoundRect(cxt,width,height,radius){
cxt.beginPath();
cxt.arc(width-radius,height-radius,radius,0,Math.PI/2);
cxt.lineTo(radius,height);
cxt.arc(radius,height-radius,radius,Math.PI/2,Math.PI);
cxt.lineTo(0,radius);
cxt.arc(radius,radius,radius,Math.PI,Math.PI*3/2);
cxt.lineTo(width-radius,0);
cxt.arc(width-radius,radius,radius,Math.PI*3/2,Math.PI*2);
cxt.closePath();
}
</script>
三、圓弧繪制
圓弧繪制.jpg
context.moveTo(x0,y0);
context.arcTo(x1,y1,x2,y2,radius);
其中(x0,y0)為起始點并非是圓弧的開始的位置，(x1,y1)為控制點，(x2,y2)為終止點，并非是圓弧結束的位置。示例代碼如下：
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//arcTo
context.beginPath();
context.moveTo(150,150);//起始點
context.arcTo(650,150,650,650,300);
context.lineWidth=5;
context.strokeStyle="red";
context.stroke();
context.beginPath();
context.moveTo(150,150);
context.lineTo(650,150);
context.lineTo(650,650);
context.lineWidth=2;
context.strokeStyle="gray";
context.stroke();
}
</script>
四、繪制彎月
繪制彎月示意圖.jpg
由上圖可知：R=(AC*AH)/HC，代碼如下：
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//開始繪制
context.arc(400,400,300,0.5*Math.PI,1.5*Math.PI,true);
context.moveTo(400,100);
context.arcTo(1200,400,400,700,(400-100)*dis(400,100,1200,400)/(1200-400));
context.stroke();
}
function dis(x1,y1,x2,y2){
return Math.sqrt((x1-x2)*(x1-x2)+(y2-y1)*(y2-y1));
}
</script>
五、貝塞爾曲線
1.二次貝塞爾曲線
context.moveTo(x0,y0);
context.quadraticCurveTo(x1,y1,x2,y2);
其中(x0,y0)為曲線的起點，(x1,y1)為控制點，(x2,y2)為曲線的終點。示例代碼如下：
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
context = canvas.getContext("2d")
context.lineWidth = 6;
context.strokeStyle = "#333";
context.beginPath();
context.moveTo(100, 250);
context.quadraticCurveTo(250, 100, 400, 250);
context.stroke();
}
</script>
2.三次貝塞爾曲線
context.moveTo(x0,y0);
context.bezierCurveTo(x1,y1,x2,y2,x3,y3);
其中(x0,y0)為曲線的起點，(x1,y1),(x2,y2)為控制點，(x3,y3)為曲線的終點。示例代碼如下：
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
context = canvas.getContext("2d")
context.lineWidth = 6;
context.strokeStyle = "#333";
context.beginPath();
context.moveTo(212, 275);
context.bezierCurveTo(150, 100, 350, 100, 276, 282);
context.stroke();
}
</script>
六、總結
利用前面所學知識繪制一片星空，代碼如下：
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=1024;
canvas.height=800;
var context=canvas.getContext('2d');
var skyStyle=context.createRadialGradient(canvas.width/2,canvas.height,0,canvas.width/2,canvas.height,canvas.height);
skyStyle.addColorStop(0.0,'#035');
skyStyle.addColorStop(1.0,'black');
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;//js 中的Math.random()隨機產生0-1之間的數 星星產生的豎直位置從0到畫布高度的65%
var a=Math.random()*360;
drawStar(context,R,x,y,a);
}
fillMoon(context,2,900,200,50,30);
drawLand(context);//繪制綠地,只需要傳入上下文的繪圖環境
}
//******************************************繪制星星
//rot為旋轉的角度 -rot是順時針轉度數
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="#fb3";
cxt.fill();
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();
}
//******************************************繪制月亮
//d為控制點橫坐標的值 x,y表示彎月的位置 R表示彎月的半徑
function fillMoon(cxt,d,x,y,R,rot,fillColor){
cxt.save();
cxt.translate(x,y);
cxt.rotate(rot*Math.PI/180);
cxt.scale(R,R);
pathMoon(cxt,d);//繪制彎月的輪廓
cxt.fillStyle=fillColor||"#fb3";
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);//內弧結束的位置為0,1
cxt.closePath();
}
function dis(x1,y1,x2,y2){
return Math.sqrt((x1-x2)*(x1-x2)+(y2-y1)*(y2-y1));
}
//******************************************繪制綠地
function drawLand(cxt){
cxt.save();
cxt.beginPath();
cxt.moveTo(0,600);
cxt.bezierCurveTo(540,400,660,800,1200,600);
cxt.lineTo(1200,800);
cxt.lineTo(0,800);
cxt.closePath();
//填充線性漸變色
var landStyle=cxt.createLinearGradient(0,800,0,0);
landStyle.addColorStop(0.0,'#030');
landStyle.addColorStop(1.0,'#580');
cxt.fillStyle=landStyle;
cxt.fill();
cxt.restore();
}
</script>
