2. 程式人生 > >HTML5學習 （二 用JavaScript在canvas裡新增內容）

HTML5學習 （二 用JavaScript在canvas裡新增內容）

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

1、在canvas裡新增內容，效果如底圖。

<script  text="text/javascript">
var c = document.getElementById("myCanvas"); <!--獲取myCanvas-->
var cxt = c.getContext("2d");   <!--建立2D檢視-->
<!--畫線-->
cxt.moveTo(0,0);  <!--開始位置-->
cxt.lineTo(150,80); <!--第一次停止位置，再次開始位置-->
cxt.lineTo(0,50);    <!--第二次停止位置，再次開始位置-->
cxt.lineTo(100,90);<!--停止位置-->


cxt.stroke();

<!--畫影象-->
cxt.fillStyle="#cccccc";
cxt.beginPath();
cxt.arc(300,80,60,30,Math.PI*2,true);<!--畫圓   座標 半徑-->
cxt.arc(400,80,30,70,Math.PI*2,true);<!--畫圓-->
cxt.closePath();

cxt.fill();
cxt.fillRect(100,100,100,100);<!--畫正方形   座標 長寬-->
</script>

相關推薦

HTML5學習 （二 用JavaScript在canvas裡新增內容）

1、在canvas裡新增內容，效果如底圖。 <script  text="text/javascript">var c = document.getElementById("myCanva

Linux學習（二）之內核、系統調用、庫

all mic linu windows系統 文件 .dll 執行 lin win 　　這篇博客主要介紹Linux中幾個常見的概念 　　 　　Kernal：內核：我們知道計算機的硬件包括：cpu、內存、外存等等 系統想要統一資源分配就需要用到內核！內核是將計算機的硬件資源抽

HTML5的學習（二）HTML5標籤

3.按功能排列標籤 （注：紅色為HTML5不支援的，藍色為HTML5新增的標籤元素。）   3.1基本 標籤 描述 HTML4 HTML5 <!--...--> 定義註釋。

web前端學習（二）html學習筆記部分（10）-- HTML5構建應用佈局和頁面

1.2.25  HTML5構建應用佈局和頁面 1.2.25.1  HTML5在移動開發中的準則 　　1.儘量使用單頁面開發 　　2.慎重選擇前端UI框架 　　3.動畫、特效使用準則（60fps） 　　　　瀏覽器消耗最小的css屬性 　　　　　　位置  -&n

原生WebGL基礎學習（二） 用WebGL繪製一個三角形

在開始之前，需要知道著色器的相關知識，可以參考：webgl介紹裡面的著色器介紹，本文的demo 用到的著色器為： <script id="vertex-shader" type="x-shader/x-vertex"> attribu

Spring 學習（二十）——用基於 XML 配置檔案的方式來配置 AOP

•除了使用 AspectJ 註解宣告切面, Spring 也支援在 Bean 配置檔案中宣告切面. 這種宣告是通過 aop schema 中的 XML 元素完成的. •正常情況下, 基於註解的宣告要優先於基於 XML 的宣告. 通過 AspectJ 註解, 切面可以與 AspectJ 相容, 而

dokuwiki學習（二）——新增頁面（文章）

    剛才新建頁面的方式，是通過在dokuwiki的程式碼端進行新增，對於普通使用者來說，不可能有許可權去操作。Dokuwiki提供了豐富的外掛進行自定義擴充套件。只要安裝一個外掛即可。在管理—擴充套件管理器，搜尋外掛Add New Page Plugin即可

unity3d學習（二）製作第一人稱射擊-玩家射擊和新增敵人

玩家射擊和新增敵人 寫在前面： - 學習課本：Unity5實戰 使用c#和unity開發多平臺遊戲-作者：Joseph Hocking - 內容：第三章 - 讓玩家能夠射擊 第一步：通

Linux學習（二）：許可權及萬用字元

文章目錄 `ls` 檢視許可權 `chmod`設定許可權 萬用字元 ls 檢視許可權 執行touch a 新建檔案a,執行命令 ll -h檢視列表 檔案a的詳細資訊（下面用作例子詳細介紹） -rw

HTML5學習（09）HTML5新增標籤

<ruby><rp>用於定義被標註的文字； <rt>用於標註拼音或者音標； 三個標籤需要配合使用。 <mark>定義帶有記號的文字； <time>用於定義公厲時間（24小時制）或者日期，有兩個重要屬性date

爬蟲庫之BeautifulSoup學習（二）

不必要 baidu html left 官方 blank 正則 文本處理 比較 BeautifulSoup官方介紹文檔：https://www.crummy.com/software/BeautifulSoup/bs4/doc/index.zh.html 四大對象種

cocos2dx 3.1從零學習（二）——菜單、場景切換、場景傳值

天空 ptr select 特效 new 要點 綁定 使用 water 回想一下上一篇的內容，我們已經學會了創建一個新的場景scene，加入sprite和label到層中。掌握了定時事件schedule。我們能夠順利的寫出打飛機的主場景框架。 上一篇的內容我練習了七個新

redis學習（二）——String數據類型

字符串類型 創建 復雜度 back nbsp 命令 時間復雜度 value con 一、概述 字符串類型是Redis中最為基礎的數據存儲類型，它在Redis中是二進制安全的，這便意味著該類型可以接受任何格式的數據，如JPEG圖像數據或Json對象描述信息等。在R

Linux 網卡驅動學習（二）（網絡驅動接口小結）

-a key 頻率 網絡 上網 ren 網絡設備 ews 入口 【摘要】前文我們分析了一個虛擬硬件的網絡驅動樣例。從中我們看到了網絡設備的一些接口。事實上網絡設備驅動和塊設備驅動的功能比較相似，都是發送和接收數據包（數據請求）。當然它們實際是有非常多不同

ext2文件系統學習（二）—— 目錄磁盤結構

echo free 文件格式 htm file 目錄結構 bitmap 點號 name 創建鏡像、mount等操作和上一篇一樣，測試目錄結構如下： 一些文件系統信息如下： Block size: 1024 Inodes per group: 1

RabbitMQ學習（二）工作隊列

lose borde 阻塞 lpad mes getc actor 使用 處理 1.工作隊列（Work Queue）又叫任務隊列（Task Queue）指將任務分發個多個消費者。 2.實際操作： 這裏使用一個生產者產生多條數據提供給3個消費者

JAVA學習（二） String使用equals方法和==分別比較的是什麽？（轉）

找到 基礎上 stirng print 大小 obj lis 分配 ret String使用的equals方法和==的區別 equals方法和==的區別 首先大家知道，String既可以作為一個對象來使用，又可以作為一個基本類型來使用。這裏指的作為一個基本類型來使用只是

CSS學習（二）

種類 round align 圖片 單獨 tom -s 中控 vertical 列表 在HTML中，有兩種類型的列表： 無序列表 - 列表項標記用特殊圖形（如小黑點、小方框等） 有序列表 - 列表項的標記有數字或字母 使用CSS，可以列出進一步的樣式，

Struts2學習（二）運行Action中方法的三種方式

tracking 利用 content con return -m i++ var itl 1.運行execute()方法 一般的能夠直接在action中書寫execute,調用action時會自己主動運行此方法 2.配置method方法 在s

新手算法學習之路----二叉樹（二叉樹的路徑和）

== style oid 添加 roo span 一個 int 二叉 題目： 給定一個二叉樹，找出所有路徑中各節點相加總和等於給定 目標值 的路徑。 一個有效的路徑，指的是從根節點到葉節點的路徑。 代碼加思路： public List<List<Intege