html5學習筆記二：利用canvas繪製簡單圖形
一，認識canvas
Canvas是html5新增的開發跨平臺動畫 遊戲的標準方案，能夠實現對圖形和視訊進行畫素級操作，這為web圖形和視訊處理打開了廣闊的空間。藉助canvas，使用者可以再web中繪製各種圖形。Canvas元素及隨其而來的程式設計介面canvas api應用前景非常廣闊，按照我的理解canvas元素能夠在網頁中建立一個矩形的畫布，我們可以在畫布上進行繪製圖形。
二，1：在頁面新增canvas元素：帶邊框的矩形
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas"style="border:1pxsolid;"width="200"height="100"></canvas>
</body>
</html>
2：利用canvas畫一個矩形
第1步：增加id為easy的canvas元素，寬和高為300和150
<canvasid="easy" style="border:1px solid;" width="300"height="150"></canvas>
第2步：使用id尋找元素。Keypoint：doucument.GetElementById函式
varc=document.getElementById("myCanvas");
第3步：通過canvas元素的getContext方法獲取上下文，建立context物件以獲取允許進行繪製的2D環境。
varcontext=c.getContext("2d");
第4步：使用javascript進行繪製。
context.fillStyle="#FF00FF";
context.fillRect(0,0,200,100);
fillstyle將填充顏色定義為粉紅色，fillrect定義繪製形狀為矩形，還定義了其四個頂點位置。
<!DOCTYPEHTML>
<html>
<body>
<canvasid="easy" style="border:1px solid;" width="300"height="150"></canvas>
<scripttype="text/javascript">
varc=document.getElementById("myCanvas");
varcontext=c.getContext("2d");
context.fillStyle="#FF00FF";
context.fillRect(0,0,200,100);
</script>
</body>
</html>
效果圖：
接下來說明下fillStyle 和strokeStyle區別：
在上例程式碼中加入
效果圖：
fillstroke是輪廓，fillstyle是填充
3，繪製圓形
首先介紹下context.arc(x,y,radius,startAangle,endAangle,anticlockwise);
這是繪製圓形的函式，引數如上最後一個是按照什麼順時針（true）或逆時針（false）畫圓
必須配合beginPath和endPath（閉合曲線）進行畫圓
<!DOCTYPE HTML >
<html>
<head>
<meta charset="utf-8">
<title>"first canvas "</title>
</head>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="2000" height="1000"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
for(var i=1;i<5;i++){
context.strokeStyle="#FF00FF";
context.strokeRect(0,0,50*i,25*i);
}
for(var i=1;i<15;i++){
context.strokeStyle="blue";
context.beginPath();
context.arc(300,0,i*10,0,Math.PI*1/2,false);
context.closePath();
context.stroke();
}
</script>
</body>
</html>
效果圖
4，清除畫布
context.clearRect(x,y,width,height);
清除的是一個矩形區域
<!DOCTYPE HTML >
<html>
<head>
<!--<meta charset="utf-8"> -->
<title>"first canvas "</title>
</head>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="500" height="250"></canvas>
<script type="text/javascript">
function clearMap(){
context.clearRect(0,0,500,250);
}
</script>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
for(var i=1;i<5;i++){
context.strokeStyle="#FF00FF";
context.strokeRect(0,0,50*i,25*i);
}
for(var i=1;i<15;i++){
context.strokeStyle="blue";
context.beginPath();
context.arc(300,0,i*10,0,Math.PI*1/2,false);
context.closePath();
context.stroke();
}
</script> </br>
<input name=""type="button" value="清除" onClick="clearMap();">
</body>
</html>
相關推薦
html5學習筆記二：利用canvas繪製簡單圖形
一，認識canvas Canvas是html5新增的開發跨平臺動畫 遊戲的標準方案，能夠實現對圖形和視訊進行畫素級操作，這為web圖形和視訊處理打開了廣闊的空間。藉助canvas，使用者可以再web中繪製各種圖形。Canvas元素及隨其而來的程式設計介面canvas api
html5學習筆記三：canvas中平移，縮放，旋轉等影象變換問題
1，儲存與恢復問題 關鍵字：save / restore save指儲存save之前的canvas狀態，restore恢復save儲存的canvas狀態。舉個例子我想在canvas中隔一秒顯示一個圖片，那我可以先用save指令儲存空白的canvas，然後在顯示一張圖片之後r
SpringMVC學習筆記二：常用註解
title c學習 請求 pin 學習 lin att 詳解 stp 轉載請註明原文地址：http://www.cnblogs.com/ygj0930/p/6831976.html 一、用於定義類的註解：@Controller @Controller 用於標記在一個類上，
framework7學習筆記二：基礎知識
部分 cnblogs query 基礎 logs code 自己 $$ pan 一：DOM7 framework7有自己的 DOM7 - 一個集成了大部分常用DOM操作的高性能庫。它的用法和jQuery幾乎是一樣的，包括大部分常用的方法和jquery風格的鏈式調用。 在開發
Spring4學習筆記二：Bean相關
因此 code per cdata 通過 反射機制 特殊符號 cat too 一：Bean的配置形式 基於XML配置：在src目錄下創建 applicationContext.xml 文件，在其中進行配置。 基於註解配置：在創建bean類時，通過註解來
小程序學習筆記二：頁面文件詳解之 .json文件
fresh 小程序 整體 屬性 spa hit rbac style mdi 頁面配置文件—— pageName.json 每一個小程序頁面可以使用.json文件來對本頁面的窗口表現進行配置，頁面中配置項會覆蓋 app.json 的 window 中相同的配置
Docker學習筆記二：Docker的安裝
ros -h bionic docker customer tex 鏈接 space 版本 安裝環境：操作系統：Ubuntu 18.04 LTS，code name:bionic (#lsb_release -a)內核版本：4.15.0-29-generic(#uname
基於.NET的CAD二次開發學習筆記二：AutoCAD .NET中的物件
1、CAD物件 一個CAD檔案（DWG檔案）即對應一個數據庫，資料庫中的所有組成部分，看的見（包括點、多段線、文字、圓等）和看不見（圖層、線型、顏色等）的都是物件，資料庫本身也是一個物件。 直線、圓弧、文字和標註等圖形物件都是物件。 線型與標註樣式等樣式設定都是物件。 圖層
分散式學習筆記二：從分散式一致性談到CAP理論、BASE理論
問題的提出 在電腦科學領域，分散式一致性是一個相當重要且被廣泛探索與論證問題，首先來看三種業務場景。 1、火車站售票 假如說我們的終端使用者是一位經常坐火車的旅行家，通常他是去車站的售票處購買車 票，然後拿著車票去檢票口，再坐上火車，開始一段美好的旅行----一切似乎都是那麼和諧。想象一
轉載：InstallShield學習筆記二：元件配置
InstallShield學習筆記二：元件配置 這裡主要講的記錄的是配置檔案的細節。 1.Features配置 在 Installshield 中，可以在 Features 新增需要安裝元件大類，這裡需要注意的是： 在InstallSrcipt MSI ，預設DefaultFeatu
JavaScript 學習筆記二：基本知識
文章目錄 預備知識 JavaScript web 開發人員必須學習的 3 門語言中的一門： 如何編寫JavaScript？ 如何執行JavaScript 使用 JavaScript的兩種方式 1. 指令碼是直
csdn學習筆記二：連結串列原型、do原型分析
設計連結串列，並設計其迭代函式 生成連結串列、列印連結串列 arr = {10, 20, 30, 100, 101, 88, 50}; head = nil; local i = 1 while true do if arr[i] then head = {va
python學習筆記二：列表
列表通過索引讀取資料： #索引讀取資料 a = [1,2,3] a[-1] 執行結果：3 列表支援巢狀： b = [[1,2,3],[4,5,6]] print(b) 執行結果：[[1, 2, 3], [4, 5, 6]] 列表可以修改： b = [[1,2,3],[4,5,
mapreduce學習筆記二：去重實驗
bound pac except 計算 throws 問題 多少 tasks tostring 實驗原理 “數據去重”主要是為了掌握和利用並行化思想來對數據進行有意義的篩選。統計大數據集上的數據種類個數、從網站日誌中計算訪問地等這些看似龐雜的任務都
python爬蟲學習筆記二：Requests庫詳解及HTTP協議
Requests庫的安裝：https://mp.csdn.net/postedit/83715574 r=requests.get(url,params=None,**kwargs) 這個r是Response物件 url ：擬獲取頁面的url連結 params：url中的額外引數
快速傅立葉變換FFT的學習筆記二：深入實踐
快速傅立葉變換FFT的學習筆記二：深入實踐 快速傅立葉變換(Fast Fourier Transform)是離散傅立葉變換的一種快速演算法，簡稱FFT，通過FFT可以將一個訊號從時域變換到頻域。 資料結構 通過AD採集到一串時域上的資料點，一個int型的陣列
odoo10學習筆記二：繼承（擴充套件）、模組資料
一：繼承 在不改變底層物件的時候新增新的功能——這是通過繼承機制來實現的，作為在現有物件之上的修改層，這些修改可以發生在所有級別：模型，檢視和業務邏輯。不是直接修改現有模組，而是建立一個新模組以新增預期的修改。 1：擴充套件模型 Odoo 模型存在 Python 的模組之外, 在中間登錄檔那裡
odoo10學習筆記二：繼承（擴展）、模塊數據
標簽 添加 方便 before 表達 use lds extension 簽名 一：繼承 在不改變底層對象的時候添加新的功能——這是通過繼承機制來實現的，作為在現有對象之上的修改層，這些修改可以發生在所有級別：模型，視圖和業務邏輯。不是直接修改現有
Esper學習筆記二：程序模型
1.UpdateListener UpdaterListener是Esper提供的一個介面，用於監聽某個EPL在引擎中的執行情況，即事件進入併產生結果後會通知UpdateListener。 介面如下： package com.espertech.esper.client;
GuavaCache學習筆記二：Java四大引用型別回顧
前言 上一篇已經講了，如何自己實現一個LRU演算法。但是那種只是最基本的實現了LRU的剔除策略，並不能在生產中去使用。因為Guava Cache中使用的是SoftReference去做的value實現，所以有必要將Java的四種引用型別在複習一下。 備註：以下程式碼使用的JVM配置為： -Xmx128