溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關利用JavaScript繪制一條直線并旋轉45度，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
繪制一條直線，并旋轉45度
html 頁面
<canvas id="canvas" width="300" height="300" ></canvas>
js頁面
<script>
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext('2d');
cxt.lineWidth = 5;
cxt.beginPath();
cxt.moveTo(20, 20);
cxt.lineTo(180, 20)
cxt.stroke();
cxt.closePath();
//設置異次元空間
cxt.save();
//異次元空間 重置原點,默認是畫布的(0,0)點
cxt.translate(20, 20);
//設置旋轉角度 參數時弧度 角度0--360 弧度=角度*Math.PI/180
cxt.rotate(-30 * Math.PI / 180);
//旋轉一個線段
cxt.lineWidth = 5;
cxt.beginPath();
cxt.moveTo(0, 0);
cxt.lineTo(20, 180);
cxt.stroke();
cxt.closePath();
//將旋轉之后的元素返回原畫布
cxt.restore();
</script>效果圖如下顯示：
以上就是利用JavaScript繪制一條直線并旋轉45度，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
