資訊專欄INFORMATION COLUMN
摘要：不同的線條樣式這里獲取節點我采用的自帶的，即在加入屬性，不熟悉的朋友可以使用上一篇文章的不同的兩條線交合處的拐彎樣式圓角平角尖角構圖陰影陰影顏色軸上偏移量，負數為相反方向軸上偏移量，模糊的像素值，則不模糊漸變相當于一條漸變線起始顏色
不同的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();
這里獲取節點我采用的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();
}
構圖陰影
let gd=this.$refs.canvas.getContext("2d");
gd.beginPath()
gd.shadowColor="#4C4C4C";//陰影顏色
gd.shadowOffsetX=5;//x軸上偏移量，負數為相反方向
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)//相當于一條漸變線
gradient.addColorStop(0,"#2C56E2");//起始顏色
gradient.addColorStop(1,"#E23C2C");//終止顏色
gd.fillStyle=gradient//添加漸變
gd.fillRect(10,10,100,100)
gd.stroke();
gd.closePath();
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110023.html
摘要：所以在此次開發中，嘗試了小步快跑快速迭代的方法。開發，不僅是在開發運用上的提升，還是一個開源項目的完整實踐。由于時間原因，在開發完基礎版本后就去做別的項目。所以，好的文檔是項目的開門鑰匙。兩個項目相輔相成。 showImg(https://segmentfault.com/img/bVba47g?w=900&h=150); 歡迎交換友鏈： laker.me--進擊的程序媛Github：...
摘要：在位置處以寬為高為，清楚指定區域并使其完全透明。調用函數開始一個路徑，調用函數結束一個路徑。端點是在選段邊緣處以線寬為長以一半線寬為寬的矩形。 二：Canvas的繪圖（上） 1. 概述 Canvas具有強大的繪圖功能，可以通過Javascript控制其上下文對象進行繪圖。 2. 基本矩形 在Canvas上，繪制基本矩形有三種方式：填充、描邊、清楚。三種API如下： fillRect(...
摘要：立即對當前矩形進行填充清除矩形語法解釋清除某個矩形內的繪制的內容，相當于橡皮擦繪制圓形概述方法創建弧曲線用于創建圓或部分圓語法解釋圓心坐標，半徑大小，繪制開始的角度。 一、拖放事件 1.1 設置拖拽 給標簽設置一個draggable設置為true, 標簽就可以拖拽了 1.2 拖拽事件 1.2.1拖拽元素事件 (事件對象為被拖拽元素) ondragstart 拖拽前觸發 ondra...
閱讀 632·2021-11-24 09:39
閱讀 3477·2019-08-30 15:53
閱讀 2508·2019-08-30 15:44
閱讀 3236·2019-08-30 12:54
閱讀 2205·2019-08-29 12:23
閱讀 3304·2019-08-26 14:05
閱讀 2100·2019-08-26 13:36
閱讀 3428·2019-08-26 13:33
