第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

使用beginPath和closePath可以分別控制各個圖形的樣式

每個moveTo代表一個新的圖形開始，但每次stroke都會把之前設(shè)置的狀態(tài)再次進行繪制

canvas是基于狀態(tài)的繪圖，先設(shè)置狀態(tài)，最后調(diào)用繪圖方法

不建議使用css來設(shè)置canvas的大小，通過屬性設(shè)置是推薦的方式

Draw an arc use canvas

window.onload=function?(ev)?{

????????var?Canvas?=?document.getElementById("newCanvas");
????????var?Canvas2D?=?Canvas.getContext("2d");
????????Canvas2D.strokeStyle?=?"#0099cc";
????????Canvas2D.fillStyle?=?"#0099cc";
????????var?FiveF?=?[0,8,16,21,29,37,42,50];
????
????????function?DrawTime(Canvas2D,Times,Radius,Spacing,MarginT,MarginL){
????????????Canvas2D.clearRect(0,0,1212,602);
????????????for(var?i?=?0;i?<?Times.length;i++){
????????????????if(Times[i]==":"){
????????????????????var?thisF?=?digit[digit.length-1];
????????????????}else{
????????????????????var?thisF?=?digit[Times[i]];
????????????????}
????????????????for(var?ii?=?0;ii?<?thisF.length;ii++){
????????????????????var?thisF_Row?=?thisF[ii];
????????????????????for(var?iii?=?0;iii?<?thisF_Row.length;iii++){
????????????????????????Canvas2D.beginPath();
????????????????????????Canvas2D.arc(
????????????????????????????(Radius*2?+?Spacing)*iii?+?MarginT?+?FiveF[i]*(Radius*2?+?Spacing),
????????????????????????????(Radius*2?+?Spacing)*ii?+?MarginL,
????????????????????????????Radius,
????????????????????????????0*Math.PI,
????????????????????????????2*Math.PI,
????????????????????????????false
????????????????????????);
????????????????????????//?Canvas2D.stroke();
????????????????????????if(thisF_Row[iii]==1){
????????????????????????????Canvas2D.fill();
????????????????????????}
????????????????????}
????????????????}
????????????}
????????}

????????setInterval(function(){
????????????var?Hour?=?new?Date().getHours().toString();
????????????var?Minute?=?new?Date().getMinutes().toString();
????????????var?Seconds?=?new?Date().getSeconds().toString();
????????????if(Hour.length==1){
????????????????Hour?=?"0"?+?Hour;
????????????}
????????????if(Minute.length==1){
????????????????Minute?=?"0"?+?Minute;
????????????}
????????????if(Seconds.length==1){
????????????????Seconds?=?"0"?+?Seconds;
????????????}
????????????var?Times?=?Hour?+":"+?Minute?+":"+?Seconds;
????????????DrawTime(Canvas2D,Times,8,3,40,170);
????????},1000)
????
????}

w3c建議不用css的形式去設(shè)定大小，要用內(nèi)聯(lián)的方式去設(shè)定大小。這其中的原因是，設(shè)定寬高不僅涉及到顯示的畫布大小，還有呈現(xiàn)的內(nèi)容的分辨率問題。

動手敲了下代碼：
<Canvas?id="canvas"?></Canvas>
<script>
????let?tangram?=?[
????????{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
????????{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
????????{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
????????{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
????????{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
????????{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
????????{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"},
????];
????window.onload?=?function?()?{
????????let?canvas?=?document.getElementById("canvas");
????????canvas.width=800;
????????canvas.height=800;
????????let?context?=?canvas.getContext("2d");
????????for(let?i?=?0;i<tangram.length;i++)
????????????draw(tangram[i],context);
????}
????function?draw(piece,cxt)?{
????????cxt.beginPath();
????????cxt.moveTo(piece.p[0].x,piece.p[0].y);
????????for(?let?i=1;?i<piece.p.length;i++)
????????????cxt.lineTo(piece.p[i].x,piece.p[i].y);

????????cxt.fillStyle=piece.color;
????????cxt.fill();
????}
</script>

canvas繪圖:

html中引用標(biāo)簽，<canvas></canvas>默認寬高300，150，大小設(shè)定沒有單位px。 javascript中設(shè)置，canvas.width ?canvas.height canvas.getContext('2d') canvas.moveTo起點 canvas.lineTo終點 canvas.stroke確定線條。 canvas.begainPath()開始繪制 ?canvas.closePath()清楚已有的狀態(tài) .lineWith 線條寬度 .strokeStyle線條樣式 .fillStyle填充顏色 繪制弧線 context.arc{ centerx(圓心橫坐標(biāo))centery(圓心縱坐標(biāo))radius（半徑） startingAngle（弧線起始），endingAngle（弧線終止） anticlockwise=false(可選值：true-逆時針、false-順時針，默認圓形順逆方向) }

注：

弧度位置始終是：0，0.5pi，1pi，1.5pi，2pi（順時針方向開始算起）。

closePath()對fill()沒有用，首尾相連。