秒速赛车打不开

canvas 設置矩形樣式

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

秒速赛车打不开BENWENJIANDANZONGJIEYIXIAWEIcanvasJUXINGSHEZHIYANGSHIDEJIANDANFANGSHI。

繪制矩形的方式有多種,具體參閱canvas繪制矩形簡單介紹一章節。

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.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/121912yawidzp7gkdoaqpn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

SHANGSHUDAIMAMORENHUIZHIYIGEJUYOUMIAOBIANWUTIANCHONGJUXING。

秒速赛车打不开XIAMIANTONGGUODAIMASHILIFENBUJIESHAOYIXIAWEICIJUXINGTIANJIAXIANGGUANYANGSHI。

一.設置描邊:

秒速赛车打不开MORENMIAOBIANYANSESHI#000000,DANGRANYEKEYIZIDINGYI。

DAIMASHILIRUXIA:

[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.strokeStyle="blue";  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/121944qdd1rhlh9r6xu09u.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

秒速赛车打不开TONGGUOstrokeStyleSHUXINGKEYISHEZHIMIAOBIANDEYANSE。

BUGUOCISHUXINGDEGONGNENGBINGBUJINXIANYUSHEZHIYANSE,HUANNENGGOUSHEZHIJIANBIANDENGXIAOGUO。

具體參閱canvas strokeStyle一章節。

二.設置描邊的粗細:

MIAOBIANDECUXIYEKEYIZIDINGYI,DAIMASHILIRUXIA:

[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.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/122022guipnvnzn2rom8nm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

SHANGSHUDAIMAKEYIJIANGJUXINGMIAOBIANCUXISHEZHIWEI10px。

關于lineWidth屬性可以參閱canvas lineWidth繪制原理一章節。

三.設置矩形填充:

XIAMIANZAILAIKANRUHESHEZHIJUXINGDEBEIJINGYANGSHI,YEJIUSHITADETIANCHONG。

DAIMASHILIRUXIA:

[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/122106xsvbd0yldl0dl66k.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

SHANGMIANDAIMAJIANGJUXINGSHIYONGHONGSEBEIJINGSETIANCHONG。

DANSHIYOUMEIYOUFAXIANYIGEQIGUAIDEXIANXIANG,MIAOBIANDEKUANDUYIJINGBUSHIZUICHUDE10px。

ZHESHIYINWEIMIAOBIANBINGBUSHIWANQUANXIANGWAIHUIZHIDE,ERSHICONGZHONGXIANXIANGLIANGCEHUIZHI,TIANCHONGHUIFUGAINEICEDEMIAOBIAN。

具體參閱canvas lineWidth繪制原理一章節。

解決方案很簡單,具體參閱canvas 填充覆蓋描邊一章節。

秒速赛车打不开fillStyleBUZHIKEYISHEZHIBEIJINGSE,HUANKEYISHEZHIJIANBIANHUOZHETUANDENGXIAOGUO。

具體參閱canvas fillStyle一章節。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部