JavaScript實作使用Canvas繪製圖形-js教程-PHP中文網

首頁

web前端

js教程

JavaScript實作使用Canvas繪製圖形

不言

Jun 25, 2018 pm 02:36 PM

canvasjs畫圖

本篇文章主要介紹了JavaScript實作使用Canvas繪製圖形的基本教程，具有一定的參考價值，有興趣的小夥伴們可以參考一下。

由於這兩年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 = $$(&#39;can&#39;);
      var cans = can.getContext(&#39;2d&#39;);
      cans.moveTo(20,30);//第一个起点
      cans.lineTo(120,90);//第二个点
      cans.lineTo(220,60);//第三个点（以第二个点为起点）
      cans.lineWidth=3;
      cans.strokeStyle = &#39;red&#39;;
      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 = $$(&#39;can&#39;);
      var cans = can.getContext(&#39;2d&#39;);
      cans.moveTo(0,0);
      cans.lineTo(400,300);
      var gnt1 = cans.createLinearGradient(0,0,400,300);//线性渐变的起止坐标
      gnt1.addColorStop(0,&#39;red&#39;);//创建渐变的开始颜色，0表示偏移量，个人理解为直线上的相对位置，最大为1，一个渐变中可以写任意个渐变颜色
      gnt1.addColorStop(1,&#39;yellow&#39;);
      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 = $$(&#39;can&#39;);
      var cans = can.getContext(&#39;2d&#39;);
      cans.fillStyle = &#39;yellow&#39;;
      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 = $$(&#39;can&#39;);
      var cans = can.getContext(&#39;2d&#39;);
      cans.strokeStyle = &#39;red&#39;;
      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 = $$(&#39;can&#39;);
      var cans = can.getContext(&#39;2d&#39;);
      var gnt1 = cans.createLinearGradient(10,0,390,0);
      gnt1.addColorStop(0,&#39;red&#39;);
      gnt1.addColorStop(0.5,&#39;green&#39;);
      gnt1.addColorStop(1,&#39;blue&#39;);
      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 = $$(&#39;can&#39;);
      var cans = can.getContext(&#39;2d&#39;);
      cans.beginPath();
      cans.arc(200,150,100,0,Math.PI*2,true);
      cans.closePath();
      cans.fillStyle = &#39;green&#39;;//本来这里最初使用的是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);[/code]

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 = $$(&#39;can&#39;);
      var cans = can.getContext(&#39;2d&#39;);
      cans.beginPath();
      cans.arc(200,150,100,0,Math.PI*2,false);
      cans.closePath();
      cans.lineWidth = 5;
      cans.strokeStyle = &#39;red&#39;;
      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 = $$(&#39;can&#39;);
      var cans = can.getContext(&#39;2d&#39;);
      var gnt = cans.createRadialGradient(200,300,50,200,200,200);
      gnt.addColorStop(1,&#39;red&#39;);
      gnt.addColorStop(0,&#39;green&#39;);
      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,&#39;red&#39;);
gnt.addColorStop(1,&#39;#333&#39;);

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

JavaScript和html5 canvas如何绘制一个小人的代码

使用JavaScript和canvas实现图片的裁剪

以上是JavaScript實作使用Canvas繪製圖形的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。