js繪制一條直線并旋轉(zhuǎn)45度

更新時間：2020年08月21日 09:08:47 作者：yangying_0220

這篇文章主要為大家詳細(xì)介紹了js繪制一條直線并旋轉(zhuǎn)45度，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js繪制一條直線并旋轉(zhuǎn)45度的具體代碼，供大家參考，具體內(nèi)容如下

繪制一條直線，并旋轉(zhuǎn)45度

html 頁面

<canvas id="canvas" width="300" height="300"
  style="background-color: orange;"></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();
    //設(shè)置異次元空間
    cxt.save();
    //異次元空間 重置原點(diǎn),默認(rèn)是畫布的(0,0)點(diǎn)
    cxt.translate(20, 20);
    //設(shè)置旋轉(zhuǎn)角度 參數(shù)時弧度 角度0--360 弧度=角度*Math.PI/180
    cxt.rotate(-30 * Math.PI / 180);

    //旋轉(zhuǎn)一個線段
    cxt.lineWidth = 5;
    cxt.beginPath();
    cxt.moveTo(0, 0);
    cxt.lineTo(20, 180);
    cxt.stroke();
    cxt.closePath();
    //將旋轉(zhuǎn)之后的元素返回原畫布
    cxt.restore();
</script>

效果圖如下顯示：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

使用three.js 畫漸變的直線

相關(guān)文章

微信小程序module.exports模塊化操作實(shí)例淺析
這篇文章主要介紹了微信小程序module.exports模塊化操作,結(jié)合實(shí)例形式簡單分析了module.exports模塊化的定義與引用相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2018-12-12
簡單分析js中的this的原理
這篇文章主要介紹了簡單分析js中的this的原理,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-08-08
一文全面解析JS中的this綁定規(guī)則
寫過JavaScript的都知道,JS中的this相對來講是比較難以捉摸的,尤其在一些復(fù)雜的場景下的指向總是讓人摸不著頭腦,所以這篇文章我們就來系統(tǒng)的學(xué)習(xí)和研究一下this的綁定規(guī)則,需要的朋友可以參考下
2024-04-04
用javascript實(shí)現(xiàn)畫圖效果的代碼
用javascript實(shí)現(xiàn)畫圖效果的代碼...
2007-07-07
JavaScript網(wǎng)頁禁用屏蔽常用操作小結(jié)
這篇文章主要為大家詳細(xì)介紹了網(wǎng)頁前端常用的JavaScript屏蔽操作,包括網(wǎng)絡(luò)劫持、禁止復(fù)制、禁止按鍵、清除緩存記錄等,有需要的可以了解下
2024-11-11
使用taro開發(fā)微信小程序遇到的坑總結(jié)
Taro，京東凹凸實(shí)驗(yàn)室出品的適配多端的一個框架，這篇文章主要介紹了使用taro開發(fā)微信小程序遇到的坑總結(jié),需要的朋友可以參考下
2019-04-04
微信小程序?qū)崿F(xiàn)自動播放視頻模仿gif動圖效果實(shí)例
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)自動播放視頻模仿gif動圖效果的相關(guān)資料,通過本文介紹的方法可以實(shí)現(xiàn)自動播放視頻，視頻無控制條無聲音且自動循環(huán)播放,需要的朋友可以參考下
2021-07-07
php常見的頁面跳轉(zhuǎn)方法匯總
Web系統(tǒng)中，從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁，是LAMP項(xiàng)目中最常用的技術(shù)之一。頁面跳轉(zhuǎn)可能是由于用戶單擊鏈接、按鈕等引發(fā)的，也可能是系統(tǒng)自動產(chǎn)生的。此處介紹PHP中常用的實(shí)現(xiàn)頁面自動跳轉(zhuǎn)的方法。
2015-04-04
JS如何顯示防盜鏈的外站圖片技巧示例
通常在開發(fā)測試環(huán)節(jié)，一些資源圖片會出現(xiàn)防盜鏈的錯誤提示，本文就通過前端基礎(chǔ)技術(shù)，實(shí)現(xiàn)基本的圖片跨站顯示效果，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-09-09
基于Cesium繪制拋物弧線
這篇文章主要為大家詳細(xì)介紹了基于Cesium繪制拋物弧線，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-11-11