javascript使用canvas繪圖（一）

shevy 發布于2019-08-26 14:05 / 3607人閱讀

摘要：畫一條直線后面的會統一使用該樣式，不再重復貼出代碼這里設置畫布大小需要在標簽里面直接設置后面的會統一使用該樣式，不再重復貼出代碼得到得到上下文環境清除原來的痕跡線條顏色起點終點線條寬度這是最后一步，繪制畫一個矩形設置填充顏色設置定

畫一條直線 css

.canvas{
            background-color: #8BF0F7;
            cursor: pointer;
        }

后面的css會統一使用該樣式，不再重復貼出css代碼

html

后面的js會統一使用該樣式，不再重復貼出css代碼

    let canvas = document.getElementsByClassName("canvas");//得到canvas
    let ca=canvas[0]
    let gd= ca.getContext("2d");//得到canvas上下文環境
    gd.beginPath();//清除原來的痕跡
    gd.strokeStyle="red";//線條顏色
    gd.moveTo(100,100);//起點
    gd.lineTo(200,200);//終點
    gd.lineWidth=50;//線條寬度
    gd.stroke();//這是最后一步，繪制

畫一個矩形

    let canvas=document.getElementsByClassName("canvas")[0];
    let gd = canvas.getContext("2d")
    gd.beginPath();
    gd.fillStyle="#B1B7B8";//設置填充顏色
    gd.fillRect(50,20,100,50);//設置定位大小（左上寬高）
    gd.stroke();

在一個矩形中清空一個矩形，使其透明

            let canvas=document.getElementsByClassName("canvas")[0];
            let gd = canvas.getContext("2d")
            gd.beginPath();
            gd.fillStyle="#149794"
            gd.fillRect(20,20,150,150);
            gd.clearRect(40,40,50,50);
            gd.stroke();

這里理解為，在canvas畫布中，畫了一個150150的矩形A，在這個矩形中又繪制了一個5050的clear矩形B，這個B會
清除A中的那一塊區域，使B這一區域變得透明，從而顯示了畫布的淺藍色,并不是全部層透明

畫一條曲線

使用arc方法，比較簡單易懂，

            let canvas=document.getElementsByClassName("canvas")[0];
            let gd = canvas.getContext("2d");
            gd.beginPath();
            gd.strokeStyle="#3C5AF2"
            gd.arc(100,100,50,0,90/180*Math.PI);
            //參數：圓心x坐標，圓心y，半徑，開始角度，結束角度（2*Math.PI是整圓）
            gd.stroke();

以下使用arc方法繪制餅圖

使用arcTo

            let canvas=document.getElementsByClassName("canvas")[0];
            let gd = canvas.getContext("2d")
            gd.beginPath();
            gd.strokeStyle="red"
            gd.moveTo(20,20)
            gd.arcTo(200,40,200,170,100)
            gd.lineTo(200,170)
            gd.stroke();

GPU云服務器云服務器 javascript繪圖使用canvas畫圖用JavaScript繪圖使用matplotlib繪圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110005.html

javascript使用canvas繪圖（二）

摘要：不同的線條樣式這里獲取節點我采用的自帶的，即在加入屬性，不熟悉的朋友可以使用上一篇文章的不同的兩條線交合處的拐彎樣式圓角平角尖角構圖陰影陰影顏色軸上偏移量，負數為相反方向軸上偏移量，模糊的像素值，則不模糊漸變相當于一條漸變線起始顏色不同的lineCap（線條樣式） let gd=this.$refs.canvas.getContext(2d) ...

劉厚水 2019-08-26 14:05 評論0 收藏0
HTML5 Canvas游戲開發實戰 PDF掃描版

摘要：游戲開發實戰主要講解使用來開發和設計各類常見游戲的思路和技巧，在介紹相關特性的同時，還通過游戲開發實例深入剖析了其內在原理，讓讀者不僅知其然，而且知其所以然。HTML5 Canvas游戲開發實戰主要講解使用HTML5 Canvas來開發和設計各類常見游戲的思路和技巧，在介紹HTML5 Canvas相關特性的同時，還通過游戲開發實例深入剖析了其內在原理，讓讀者不僅知其然，而且知其所以然。在本書...

cocopeak 2019-04-23 14:39 評論0 收藏0
自開發的EasyCanvas繪圖庫實踐、Pixeler項目開發小結

摘要：所以在此次開發中，嘗試了小步快跑快速迭代的方法。開發，不僅是在開發運用上的提升，還是一個開源項目的完整實踐。由于時間原因，在開發完基礎版本后就去做別的項目。所以，好的文檔是項目的開門鑰匙。兩個項目相輔相成。 showImg(https://segmentfault.com/img/bVba47g?w=900&h=150); 歡迎交換友鏈： laker.me--進擊的程序媛Github：...

lovXin 2019-08-22 17:28 評論0 收藏0