2. 程式人生 > >Canvas繪圖——使用Canvas繪製圖形的基本教程

Canvas繪圖——使用Canvas繪製圖形的基本教程

阿新 • • 發佈：2019-01-27

HTML5火的正熱，最近有個想法也是要用到HTML的相關功能，所以也要好好學習一把。

好好看了一下Canvas的功能，感覺HTML5在客戶端互動的功能性越來越強了，今天看了一下Canvas繪圖，下邊是幾個例項，記下以備後用。

1、使用Canvas繪製直線：

複製程式碼 
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC
 
}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            cans.moveTo(20,30);//第一個起點
            cans.lineTo(
 
120,90);//第二個點
            cans.lineTo(220,60);//第三個點（以第二個點為起點）
            cans.lineWidth=3;
            cans.strokeStyle = 'red';
            cans.stroke();
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body
 
>
</html>
複製程式碼

這裡用到的兩個API方法，moveTo和lineTo分別是線段的起點和終點座標，變數為（X座標,Y座標）,strokeStyle、stroke分別路徑繪製樣式和繪製路徑。

2、繪製漸變線條

漸變線條就是顏色有漸變的效果，當然漸變的樣式可以遵循路徑的方向也可以不遵循路徑的方向：

複製程式碼 
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            cans.moveTo(0,0);
            cans.lineTo(400,300);
            var gnt1 = cans.createLinearGradient(0,0,400,300);//線性漸變的起止座標
            gnt1.addColorStop(0,'red');//建立漸變的開始顏色，0表示偏移量，個人理解為直線上的相對位置，最大為1，一個漸變中可以寫任意個漸變顏色
            gnt1.addColorStop(1,'yellow');
            cans.lineWidth=3;
            cans.strokeStyle = gnt1;
            cans.stroke();
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>
複製程式碼

3、繪製矩形或正方形：

這種矩形框如果使用HTML4只能使用後臺程式碼才能生成了，現在HTML5提供的Canvas功能卻很容易就能繪製，所以說HTML5的優越性是相當高的。

複製程式碼 
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            cans.fillStyle = 'yellow';
            cans.fillRect(30,30,340,240);
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>
複製程式碼

這裡使用了一個方法——fillRect（）從字面意思也能知道這個就是填充一個矩形，這裡的引數值得說明一下fillRect(X,Y,Width,Height)，這個和數學裡的座標是不一樣的，具體請看

這裡的X，Y是相對Canvas左上角的起點開始的，謹記！！

4、繪製一個簡單的矩形框

上例中講到要繪製一個矩形塊，填充了顏色，這個例子只是簡單地繪製一個矩形而不實現填充效果。

複製程式碼 
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            cans.strokeStyle = 'red';
            cans.strokeRect(30,30,340,240);
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>
複製程式碼

這個很簡單，和上例一樣，就是將fill替換成了stroke，具體詳見上例。

 5、繪製一個線性漸變的矩形

漸變是填充的一種相當不錯的效果，結合例項2和例項3，我們可以建立一個漸變的矩形

複製程式碼 
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            var gnt1 = cans.createLinearGradient(10,0,390,0);
            gnt1.addColorStop(0,'red');
            gnt1.addColorStop(0.5,'green');
            gnt1.addColorStop(1,'blue');
            cans.fillStyle = gnt1;
            cans.fillRect(10,10,380,280);
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>
複製程式碼

不解釋了，記住fillRect（X,Y,Width,Height）就行了。

6、填充一個圓形

圓形的用途很廣，當然也包含了橢圓。

複製程式碼 
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            cans.beginPath();
            cans.arc(200,150,100,0,Math.PI*2,true);
            cans.closePath();
            cans.fillStyle = 'green';//本來這裡最初使用的是red，截圖一看，傻眼了，怕上街被愛國者打啊，其實你懂的~~
            cans.fill();
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>
複製程式碼

這裡的arc方法的用法是 arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是（圓心X座標，圓心Y座標，半徑，開始角度（弧度），結束角度弧度，是否按照順時針畫）；

arc中各引數比較：

a、cans.arc(200,150,100,0,Math.PI,true);

c、cans.arc(200,150,100,0,Math.PI/2,true);

c、cans.arc(200,150,100,0,Math.PI/2,true);

d、cans.arc(200,150,100,0,Math.PI/2,false);

 7、圓形區塊

複製程式碼 
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            cans.beginPath();
            cans.arc(200,150,100,0,Math.PI*2,false);
            cans.closePath();
            cans.lineWidth = 5;
            cans.strokeStyle = 'red';
            cans.stroke();
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>
複製程式碼

這裡不解釋了，和上邊的例子相同，lineWidth是控制線條的寬度的。

8、圓形漸變

複製程式碼 
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            var gnt = cans.createRadialGradient(200,300,50,200,200,200);
            gnt.addColorStop(1,'red');
            gnt.addColorStop(0,'green');
            cans.fillStyle = gnt;
            cans.fillRect(0,0,800,600);
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="800px" height="600px">4</canvas>
    </body>
</html>
複製程式碼

這裡需要說明的是createRadialGradient方法，引數有（Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd），也就是說，它在實行漸變時，使用了兩個圓，一個是原始的圓，一個是漸變式圓，其實，這種通過座標與半徑控制的方式可以實現很多樣式，比如

立體圓

var gnt = cans.createRadialGradient(200,150,0,200,50,250);
gnt.addColorStop(0,'red');
gnt.addColorStop(1,'#333');

相關推薦

Canvas繪圖——使用Canvas繪製圖形的基本教程

HTML5火的正熱，最近有個想法也是要用到HTML的相關功能，所以也要好好學習一把。 好好看了一下Canvas的功能，感覺HTML5在客戶端互動的功能性越來越強了，今天看了一下Canvas繪圖，下邊是幾個例項，記下以備後用。 1、使用Canvas繪製直線： &

Canvas  繪圖  --圖形繪製

     Canvas，是螢幕上一個由JavaScript控制的即時模式點陣圖區域，即時模式是指在畫布上呈現畫素的方式，canvas通過JavaScript呼叫canvas API，在每一幀中完全重繪螢幕上的點陣圖。我們所要做的就是在每一幀渲染之前設定螢幕的顯示內容，這樣才能

Android：檢視繪製(一) ------基本的繪圖操作Paint和Canvas

大家都知道Android的UI很強大，各種系統控制元件和自定義控制元件，實現了很多絢麗的效果。而這些都離不開我們這篇文章講到的Paint和Canvas。 Android提供了Canvas（畫布）和Paint（畫筆）用來實現檢視的繪製工作。 之所以把P

Canvas繪製圖形

1.Android 利用canvas畫各種圖形(點、直線、弧、圓、橢圓、文字、矩形、多邊形、曲線、圓角矩形) 參考： https://blog.csdn.net/u013831257/article/details/50556098 https://blog.csdn.net/qq_2175

canvas繪製圖形——圓弧與圓形

canvas 繪製圓弧 繪製圓弧使用 context.arc( ) 函式，包含六個引數。 context.arc( centerx,centery,radius, startingAngle,endingAngle, anticlockwise = false )

canvas繪製圖形——直線、多邊形、七巧板

前言 canvas 是 html5 中的一個新元素，主要用於圖形的繪製，通過 JavaScript 來控制。<canvas> 標籤定義一個圖形容器，也可以叫做畫布，通過 js 指令碼可以繪製出各種各樣的影象。 建立canvas 建立 canvas 只需要新增 canv

HTML 5 Canvas 繪製圖形影象

HTML5 Canvas HTML5 <canvas> 標籤定義圖形，比如圖表和其他影象，必須使用指令碼來繪製圖形。<canvas> 是 HTML 5 中的新標籤。 <canvas> 元素本身並沒有繪製能力，它僅僅是圖形的容器/畫布，必須使用指令碼(Jav

《Javascript 高階程式設計(第三版)》筆記0x1B 使用 Canvas 繪圖：基本用法，2D上下文

目錄 基本用法 2D 上下文     填充和描邊     繪製矩形     繪製路徑     繪製文字     變換

Canvas繪圖教程及簡單實踐

一、前言     最近想嘗試用程式碼畫圖，最開始考慮的是用css，用css畫圖的本質就是不斷地拼接div，熟悉一些基本的css屬性根據需求去設定，有一定的耐心就可以實現。網上有很多優秀的例子，如下面教程中的哆啦A夢。    https://blog.csdn.

HTML5 canvas繪圖基本使用方法

<canvas></canvas>是HTML5中新增的標籤，用於繪製圖形，實際上，這個標籤和其他的標籤一樣，其特殊之處在於該標籤可以獲取一個CanvasRenderingContext2D物件，我們可以通過JavaScript指令碼來控制

JS用Canvas繪圖-基本語法

不用說，HTML5新增的最愛歡迎的功能就是<canvas>元素。這個元素負責在頁頁中設定一個區域，然後就可以通過JavasScript動態地在這個區域中繪製圖形。<canvas>元素最早是由蘋果公司推出的，當時主要用在其Dashboard

微信小程式開發—(八)canvas繪製圖形

一.小知識 (1).API介面 (2).context 物件的方法列表 二.步驟 wxml中：      <canvas canvas-id="myCanvas" class=

[實驗]在同一個 canvas 元素中繪製不同顏色的圖形

實驗背景： 在做一個 HTML 5 的一個遊戲專案的時候，想在同一個 canvas 元素中繪製多個具有不同顏色的圖畫，但是由於當時對 HTML 5 canvas 元素不是很熟悉，結果總是所有圖畫都具有一樣的顏色。去網上查詢，也沒有找到這個問題的答案，於是只能自己研究了。

HTML5 高階之canvas 繪製圖形

canvas是HTML5中新增的標籤，像所有dom一樣，擁有自己的屬性、方法、和事件，其中就有繪圖的方法，js能夠呼叫它在網頁上完成繪圖。 canvas也是HTML5中最強大的特性之一，允許開發者使用動態和互動式方法在web上實現桌面應用程式的功能 canvas元素會

HTML5利用Canvas繪製圖形(繪製漸變、模式、變換)

繪製漸變 漸變是一種很普遍的視覺形象，能帶來視覺上的舒適感。在Canvas中，繪圖API提供了兩個原生的漸變方法，包括線性漸變和徑向漸變。漸變，在顏色集上使用逐步抽樣的演算法，可以應用的描邊樣式和填充樣式中。使用漸變需要三個步驟：首先是建立漸變物件；其次是設定漸變顏色和過渡

【Visual C++】遊戲開發筆記之四——遊戲畫面繪圖（一）基本圖形繪製

毛星雲，網路ID「淺墨」，90後，熱愛遊戲開發、遊戲引擎、計算機圖形、實時渲染等技術，就職於騰訊互娛。 微軟最有價值專家 著作《Windows遊戲程式設計之從零開始》、《OpenCV3程式設計入門》 碩士就讀於南京航空航天大學航天學院（2013級碩士研究生），已於2016年三月畢業。本科

微信小程式(四)canvas繪圖並儲存到手機相簿並分享到朋友圈和fileText繪製文字進行自動換行

思路 首先準備好一張圖片，本地圖片和網路圖片均可作為你的背景圖小程式目前不支援截圖，這裡講解本地圖片。 會用到 wx.createCanvasContext(#獲取畫布的id)、 drawImage(

HTML5利用Canvas繪製圖形(使用影象、裁剪區域、使用文字。陰影效果和操作畫素)

使用影象 在canvas中插入影象 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</t

【canvas學習筆記二】繪製圖形

上一篇我們已經講述了canvas的基本用法，學會了構建canvas環境。現在我們就來學習繪製一些基本圖形。 座標 canvas的座標原點在左上角，從左到右X軸座標增加，從上到下Y軸座標增加。座標的一個單元是1畫素。示意如下： 矩形 canvas可以繪製的多邊形只有矩形，其他

Canvas繪製圖形基礎

<canvas> 標籤只有兩個屬性—— width和height。這些都是可選的，並且同樣利用 DOM properties 來設定。當沒有設定寬度和高度的時候，canvas會初始化寬度為300畫素和高度為150畫素。該元素可以使用CSS來定義大小，但在繪製時影象