老師講得太好了, 不僅學(xué)習(xí)到了新的canvas api,更重要的是一些基于canvas的編程思路,受益匪淺,點(diǎn)贊!
2019-06-16
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
context = canvas.getContext("2d");
context.beginPath();
context.strokeStyle = "red";
context.linewidth = 10;
context.moveTo(10, 10);
context.lineTo(50, 50);
context.stroke();
context.endPath();
canvas.width = 800;
canvas.height = 800;
context = canvas.getContext("2d");
context.beginPath();
context.strokeStyle = "red";
context.linewidth = 10;
context.moveTo(10, 10);
context.lineTo(50, 50);
context.stroke();
context.endPath();
2019-04-12
const 繪制多邊形=(邊數(shù),偏移橫坐標(biāo),偏移縱坐標(biāo),半徑)=>{
const 平分角度=360/邊數(shù), 圓周率=Math.PI
for (let 索引=0;索引<邊數(shù);索引++){
let 橫坐標(biāo)=Math.cos(((90-平分角度+平分角度*索引)*圓周率)/180)*半徑+偏移橫坐標(biāo)
let 縱坐標(biāo)=-Math.sin(((90-平分角度+平分角度*索引)*圓周率)/180)*半徑+偏移縱坐標(biāo)
ctx.lineTo(橫坐標(biāo),縱坐標(biāo))
}
}
const 平分角度=360/邊數(shù), 圓周率=Math.PI
for (let 索引=0;索引<邊數(shù);索引++){
let 橫坐標(biāo)=Math.cos(((90-平分角度+平分角度*索引)*圓周率)/180)*半徑+偏移橫坐標(biāo)
let 縱坐標(biāo)=-Math.sin(((90-平分角度+平分角度*索引)*圓周率)/180)*半徑+偏移縱坐標(biāo)
ctx.lineTo(橫坐標(biāo),縱坐標(biāo))
}
}
2018-10-31