JavaScript使用canvas繪制坐標和線
更新時間:2021年04月28日 15:06:47 作者:evan_qb
這篇文章主要為大家詳細介紹了JavaScript使用canvas繪制坐標和線,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript使用canvas繪制坐標和線的具體代碼,供大家參考,具體內(nèi)容如下
具體代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在指定位置畫多個點</title> <style> canvas{ border: 1px dashed gray; } </style> </head> <body> <canvas id="cvs" width="500" height="500"></canvas> </body> </html>
js代碼:
<script> var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d'); // 坐標軸距離畫布上右下左的邊距 var padding = { top:20, right:20, bottom:20, left:20 } // 坐標軸中箭頭的寬和高 var arrow = { width:12, height:20 } // 求坐標軸上頂點的坐標 var vertexTop = { x:padding.left, y:padding.top } // 求坐標軸原點的坐標 var origin = { x:padding.left, y:cvs.height - padding.bottom } // 求坐標軸右頂點的坐標 var vertexRight = { x:cvs.width - padding.left, y:cvs.height - padding.bottom } //設(shè)置線寬 ctx.lineWidth = 2; //畫坐標軸的兩條線 ctx.beginPath(); ctx.moveTo(vertexTop.x,vertexTop.y); ctx.lineTo(origin.x,origin.y); ctx.lineTo(vertexRight.x,vertexRight.y); ctx.stroke(); //如何畫箭頭 //畫頂上箭頭 // ^ // | // | ctx.beginPath(); ctx.moveTo(vertexTop.x,vertexTop.y); ctx.lineTo(vertexTop.x - arrow.width/2,vertexTop.y + arrow.height); ctx.lineTo(vertexTop.x,vertexTop.y + arrow.height/2); ctx.lineTo(vertexTop.x + arrow.width/2,vertexTop.y + arrow.height); ctx.fill(); //畫右邊的箭頭 // ---> ctx.beginPath(); ctx.moveTo(vertexRight.x,vertexRight.y); ctx.lineTo(vertexRight.x - arrow.height,vertexRight.y - arrow.width); ctx.lineTo(vertexRight.x - arrow.height/2,vertexRight.y); ctx.lineTo(vertexRight.x - arrow.height,vertexRight.y + arrow.width); ctx.fill(); /* * 在坐標軸中指定位置畫點,坐標算法: * 點的x軸:原點x坐標 + 點到原點的水平距離 * 點的y軸:原點y坐標 - 點到原點的垂直距離 */ //定義點的坐標 var points = [[10,10],[50,50],[90,90],[130,130],[170,170],[200,200]]; //在坐標中畫點 使用循環(huán)遍歷數(shù)組中的坐標 //設(shè)置顏色 ctx.fillStyle = "green"; points.forEach(function(arr){ ctx.fillRect(origin.x + arr[0],origin.y - arr[1],5,5); }); //根據(jù)點連線 //防止重繪 ctx.beginPath(); ctx.lineWidth = 2; ctx.strokeStyle = "yellow"; points.forEach(function (arr) { ctx.lineTo(origin.x + arr[0] + 1.8,origin.y - arr[1] + 1.8); }); //描邊 ctx.stroke(); </script>
效果如下:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript 手動實現(xiàn)instanceof的方法
instanceof運算符用于檢測構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在某個實例對象的原型鏈上,本文重點給大家介紹JavaScript手動實現(xiàn)instanceof的問題,感興趣的朋友跟隨小編一起看看吧2021-10-10JavaScript中Object.prototype.toString方法的原理
這篇文章主要介紹了JavaScript中Object.prototype.toString方法的原理的相關(guān)資料,需要的朋友可以參考下2016-02-02javascript中傳統(tǒng)事件與現(xiàn)代事件
本文給大家介紹的是使用傳統(tǒng)事件的方法來模擬現(xiàn)代事件,十分的簡單實用,有需要的小伙伴可以參考下。2015-06-06利用JavaScript實現(xiàn)靜態(tài)圖片局部流動效果
如果你有玩過《王者榮耀》、《陰陽師》?等手游,一定注意到過它的啟動動畫、皮膚立繪卡片等場景,經(jīng)常采用靜態(tài)底圖加局部液態(tài)流動效果的簡單動畫,本文將利用JavaScript實現(xiàn)這一效果,需要的可以參考一下2022-08-08