国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

HTML5畫布Canvas文本填充、線段屬性、裁剪、透明度與像素合并方式

來源:懂視網 責編:小采 時間:2020-11-27 15:12:20
文檔

HTML5畫布Canvas文本填充、線段屬性、裁剪、透明度與像素合并方式

HTML5畫布Canvas文本填充、線段屬性、裁剪、透明度與像素合并方式:CSS3中的很多都可以類比與我們canvas的一些屬性 canvas中畫筆環境對象的很多屬性都可以類比CSS3中的屬性 我們不僅僅可以繪制圖形,還可以向畫布中添加文字文字填充同樣先獲取元素對象與環境對象<canvas id="myCanvas" w
推薦度:
導讀HTML5畫布Canvas文本填充、線段屬性、裁剪、透明度與像素合并方式:CSS3中的很多都可以類比與我們canvas的一些屬性 canvas中畫筆環境對象的很多屬性都可以類比CSS3中的屬性 我們不僅僅可以繪制圖形,還可以向畫布中添加文字文字填充同樣先獲取元素對象與環境對象<canvas id="myCanvas" w

CSS3中的很多都可以類比與我們canvas的一些屬性
canvas中“畫筆”環境對象的很多屬性都可以類比CSS3中的屬性
我們不僅僅可以繪制圖形,還可以向畫布中添加文字

文字填充

同樣先獲取元素對象與環境對象

<canvas id="myCanvas" width=500 height=500></canvas>
var canvas = document.getElementById('myCanvas'),
 ctx = canvas.getContext('2d');

font用于設置字體屬性
fillText設置實體文字與位置
strokeText設置空心文字與位置

ctx.fillStyle = 'red';
ctx.font = '50px sans-serif';
ctx.fillText('hello world!', 100, 100);

font可以參考css的font屬性
默認值’10px sans-serif’


還有一個測量文字寬度的方法了解即可
measureText()

console.log(ctx.measureText('hello world!').width);

線段屬性

線段覆蓋

lineCap()用于設置線段覆蓋屬性
有三個值,butt/square/round

ctx.lineCap = 'butt'; //默認ctx.lineWidth = 50;
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = 'square';
ctx.lineWidth = 50;
ctx.moveTo(100, 200);
ctx.lineTo(400, 200);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = 'round';
ctx.lineWidth = 50;
ctx.moveTo(100, 300); 
ctx.lineTo(400, 300);
ctx.stroke();

圖片中的灰色線條是我添加的
這樣就能夠看出三個值得區別

線段接合

lineJoin()定義了線段接合的行為
同樣有三個值,miter/round/bevel

ctx.lineWidth = 40;
ctx.lineJoin = 'miter'; //默認ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();


ctx.lineWidth = 40;
ctx.lineJoin = 'round'; //改ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();


ctx.lineWidth = 40;
ctx.lineJoin = 'bevel'; //改ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();


當我們使用默認的miter時
當兩條線段角度很小的時候
“尖”會越來越大

當它“尖”到一定程度時,默認值就會變成bever

我們可以設置突破這個,使用miterLimit
這樣改變默認值的長度就會被我們設置為limit*lineWidth/2
了解就好

ctx.miterLimit = 30;

裁剪

clip屬性表示當前路徑外的區域不再繪制
就相當于把當前這塊區域從畫布上裁剪下來

ctx.arc(250, 250, 100, 0, Math.PI*2, 0);ctx.clip();ctx.fillRect(0, 0, 500, 500);

這里我把畫布截成了一個圓
這樣填充矩形時就只能填充到這個“圓形畫布”里了

透明度

使用globalAlpha可以設置全局透明度
這個非常簡單就不多解釋了

ctx.globalAlpha = 0.4;ctx.fillRect(100, 100, 300, 300);

像素合并

globalCompositeOperation用于設置
新圖形像素與舊圖形像素的合并方式
它有11個值
常見的有3個,source-over(默認)/destination-over/copy
souce-over是后繪制圖形覆蓋到先繪制圖形的上面
destination-over是先繪制圖形在后繪制圖形的上面
copy是只顯示后繪制圖形(先繪制圖形消失)
其他值理論上是這樣的(不同瀏覽器實現程度或方式不同)

ctx.fillStyle = 'blue';
ctx.fillRect(100, 100, 200, 200);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'red';
ctx.arc(300, 300, 100, 0 ,Math.PI*2, 0);
ctx.fill();

下面我給出我在最新版chrome測試的11個值供大家參考

source-over:

destination-over:

copy:

lighter:

xor:

source-atop:

destination-atop:

source-in:

destination-in:

source-out:

destination-out:

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

HTML5畫布Canvas文本填充、線段屬性、裁剪、透明度與像素合并方式

HTML5畫布Canvas文本填充、線段屬性、裁剪、透明度與像素合并方式:CSS3中的很多都可以類比與我們canvas的一些屬性 canvas中畫筆環境對象的很多屬性都可以類比CSS3中的屬性 我們不僅僅可以繪制圖形,還可以向畫布中添加文字文字填充同樣先獲取元素對象與環境對象<canvas id="myCanvas" w
推薦度:
標簽: 文字 和文字 裁剪
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top 主站蜘蛛池模板: 欧美在线播放视频 | 国产一区二区在线视频 | 国产精品高清一区二区三区不卡 | 欧美一区二区视频在线观看 | 欧美aⅴ在线 | 国产成人免费视频精品一区二区 | 国产精品高清久久久久久久 | 超级毛片| 国产一区二区三区毛片 | 视频在线观看一区 | 日韩中文在线视频 | 精品国产一区二区三区在线 | 国产在线精品一区二区三区不卡 | 国产一级特黄高清免费下载 | 欧美va免费精品高清在线 | 日本二区在线观看 | 亚洲 欧洲 另类 综合 自拍 | 制服丝袜中文字幕在线 | 亚洲综合一区二区精品久久 | 国内精品一区二区三区αv 国产最新进精品视频 | 国内精品久久久久影院不卡 | 国产精品91av | 国产精品视频一区二区三区w | a级精品国产片在线观看 | 国产精品女同一区二区久久 | 国产欧美视频在线观看 | 午夜精品一区二区三区在线视 | 自拍亚洲| 欧美成人中文字幕在线视频 | 亚洲区中文字幕 | 一区在线免费观看 | 亚洲国产日韩在线一区 | 国产欧美久久久精品影院 | 亚洲欧美国产高清va在线播放 | 香蕉乱码成人久久天堂爱免费 | 香蕉视频啪啪 | 欧美久久天天综合香蕉伊 | 欧美一区二区三区在线视频 | 国产精品久久久久久久久久久久 | 国产大片www | 中文国产成人精品少久久 |