秒速赛车打不开

canvas 填充覆蓋描邊

2018-10-20 13:18|作者: admin|查看: 7789|評論: 0|來自: 螞蟻部落

TIANCHONGHEMIAOBIANSHIcanvasZHONGZUIWEIJIBENDECAOZUO,BENWENBUZUOXIANGXIJIESHAO。

更多內容可以參閱canvas 設置矩形樣式一章節。

DANSHIYOUSHIHOU,ZHEXIECAOZUOHUIDAILAILINGRENQIGUAIDEXIANXIANG,BIRUBENWENJIANGYAOJIESHAODETIANCHONGFUGAIMIAOBIAN。

SHOUXIANKANYIDUANDAIMASHILI:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://glbcf.cn/" /><title>螞蟻部落</title><script>window.onload=function(){  let canvas = document.getElementById("canvas");  let ctx = canvas.getContext("2d");  ctx.rect(10, 10, 100, 100);  ctx.lineWidth=10;  ctx.strokeStyle="blue";  ctx.fillStyle="red";  ctx.stroke();  ctx.fill();}</script></head><body><canvas id="canvas" width="300" height="150"></canvas></body></html>

DAIMAYUNXINGXIAOGUOJIETURUXIA:

a:3:{s:3:\"pic\";s:43:\"portal/201810/20/131940wzazommkvvmfvf6p.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

DAIMAFENXIRUXIA:

(1).lineWidthSHUXINGSHEZHIMIAOBIANKUANDUWEI10px,YEJIUSHIBIANKUANGDEHOUDU。

(2).fillStyleSHUXINGSHEZHITIANCHONGYANSEWEIHONGSE。

(3).HENMINGXIANBIANKUANGDEMIAOBIANKUANDUMEIYOU10px,YEJIUSHITAHENKENENGBEITIANCHONGZHEGAILE。

原理很簡單,canvas繪制線條的時候,并不是沿著它的起始位置向外擴展,而是將這個起始位置作為中線向兩側擴展,這么說可能大家還不明白,具體參閱canvas lineWidth繪制原理一章節。

RUGUOBUXIANGCHUXIANSHANGSHUXIANXIANG,KEYICAIYONGRUXIAJIEJUEFANGAN:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://glbcf.cn/" /><title>螞蟻部落</title><script>window.onload=function(){  let canvas = document.getElementById("canvas");  let ctx = canvas.getContext("2d");  ctx.rect(10, 10, 100, 100);  ctx.lineWidth=10;  ctx.strokeStyle="blue";  ctx.fillStyle="red";  ctx.fill();  ctx.stroke();}</script></head><body><canvas id="canvas" width="300" height="150"></canvas></body></html>

DAIMAYUNXINGXIAOGUOJIETURUXIA:

a:3:{s:3:\"pic\";s:43:\"portal/201810/20/132017vle5dmjfl13evdkv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

SHANGSHUDAIMADEBIAOXIANYIJINGHUIFUZHENGCHANG,HENJIANDANZHIYAOJIANGctx.fillFANGFAHEctx.strokeFANGFADIAOZHENGYIXIAWEIZHIJIKE。

YEJIUSHIXIANTIANCHONGZAIMIAOBIAN,NEIMEMIAOBIANJIUHUIFUGAIZAITIANCHONGZHISHANG,HOULAIZHEJUSHANG,HENQINGSONGJIEJUECIWENTI。

ZAIWANGSHANGYEYOUGUANYUCIFANGMIANDEJIEJUEFANGAN,ZUIHAOHUANSHIYAOLEJIECHUXIANCIWENTIDEYUANLI。

KEYIZUODAOJUYIFANSAN,ERBUSHITOUTONGYITOUJIAOTONGYIJIAO,JINFUZAIBIAOMIAN。

更多canvas知識可以參閱canvas教程板塊。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部