資訊專欄INFORMATION COLUMN
摘要：不同的線條樣式這里獲取節(jié)點(diǎn)我采用的自帶的，即在加入屬性，不熟悉的朋友可以使用上一篇文章的不同的兩條線交合處的拐彎樣式圓角平角尖角構(gòu)圖陰影陰影顏色軸上偏移量，負(fù)數(shù)為相反方向軸上偏移量，模糊的像素值，則不模糊漸變相當(dāng)于一條漸變線起始顏色
不同的lineCap（線條樣式）
let gd=this.$refs.canvas.getContext("2d")
gd.beginPath();
gd.lineWidth=10;
gd.lineCap="butt";
gd.moveTo(50,50)
gd.lineTo(150,50)
gd.stroke();
gd.closePath();
gd.beginPath();
gd.lineCap="round";
gd.moveTo(50,70)
gd.lineTo(150,70)
gd.stroke();
gd.closePath();
gd.beginPath();
gd.lineCap="square";
gd.moveTo(50,90)
gd.lineTo(150,90)
gd.stroke();
gd.closePath();
這里獲取節(jié)點(diǎn)我采用的vue自帶的refs，即在div加入 ref="canvas"屬性，不熟悉的朋友可以使用上一篇文章的getElementByClassName不同的lineJoin(兩條線交合處的拐彎樣式)
paint7(){
let gd=this.$refs.canvas.getContext("2d")
this.drawMText(100,"round",gd);//圓角
this.drawMText(200,"bevel",gd);//平角
this.drawMText(300,"miter",gd);//尖角
},
drawMText(y,str,gd){
gd.beginPath();
gd.lineCap="butt";
gd.lineJoin=str;
gd.lineWidth=10;
gd.moveTo(20,y);
gd.lineTo(70,y-80);
gd.lineTo(82.5,y-25);
gd.lineTo(90,y-80)
gd.lineTo(140,y);
gd.stroke();
gd.closePath();
}
構(gòu)圖陰影
let gd=this.$refs.canvas.getContext("2d");
gd.beginPath()
gd.shadowColor="#4C4C4C";//陰影顏色
gd.shadowOffsetX=5;//x軸上偏移量，負(fù)數(shù)為相反方向
gd.shadowOffsetY=-10;//y軸上偏移量，
gd.shadowBlur=4;//模糊的像素值，0則不模糊
gd.fillStyle="blue";
gd.fillRect(100,100,100,100);
gd.stroke();
gd.closePath();
漸變
let gd=this.$refs.canvas.getContext("2d");
gd.beginPath();
let gradient=gd.createLinearGradient(30,30,70,70)//相當(dāng)于一條漸變線
gradient.addColorStop(0,"#2C56E2");//起始顏色
gradient.addColorStop(1,"#E23C2C");//終止顏色
gd.fillStyle=gradient//添加漸變
gd.fillRect(10,10,100,100)
gd.stroke();
gd.closePath();
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110023.html
摘要：所以在此次開發(fā)中，嘗試了小步快跑快速迭代的方法。開發(fā)，不僅是在開發(fā)運(yùn)用上的提升，還是一個開源項(xiàng)目的完整實(shí)踐。由于時(shí)間原因，在開發(fā)完基礎(chǔ)版本后就去做別的項(xiàng)目。所以，好的文檔是項(xiàng)目的開門鑰匙。兩個項(xiàng)目相輔相成。 showImg(https://segmentfault.com/img/bVba47g?w=900&h=150); 歡迎交換友鏈： laker.me--進(jìn)擊的程序媛Github：...
摘要：在位置處以寬為高為，清楚指定區(qū)域并使其完全透明。調(diào)用函數(shù)開始一個路徑，調(diào)用函數(shù)結(jié)束一個路徑。端點(diǎn)是在選段邊緣處以線寬為長以一半線寬為寬的矩形。 二：Canvas的繪圖（上） 1. 概述 Canvas具有強(qiáng)大的繪圖功能，可以通過Javascript控制其上下文對象進(jìn)行繪圖。 2. 基本矩形 在Canvas上，繪制基本矩形有三種方式：填充、描邊、清楚。三種API如下： fillRect(...
摘要：立即對當(dāng)前矩形進(jìn)行填充清除矩形語法解釋清除某個矩形內(nèi)的繪制的內(nèi)容，相當(dāng)于橡皮擦繪制圓形概述方法創(chuàng)建弧曲線用于創(chuàng)建圓或部分圓語法解釋圓心坐標(biāo)，半徑大小，繪制開始的角度。 一、拖放事件 1.1 設(shè)置拖拽 給標(biāo)簽設(shè)置一個draggable設(shè)置為true, 標(biāo)簽就可以拖拽了 1.2 拖拽事件 1.2.1拖拽元素事件 (事件對象為被拖拽元素) ondragstart 拖拽前觸發(fā) ondra...
閱讀 647·2021-11-24 09:39
閱讀 3489·2019-08-30 15:53
閱讀 2528·2019-08-30 15:44
閱讀 3246·2019-08-30 12:54
閱讀 2216·2019-08-29 12:23
閱讀 3312·2019-08-26 14:05
閱讀 2113·2019-08-26 13:36
閱讀 3443·2019-08-26 13:33
