简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > H5教程 > 主體

html5：畫布

高洛峰
發布： 2016-10-15 09:14:07
原創
1541 人瀏覽過

1.什么是canvas?

可以绘制图形的标签。一般用javascript来绘制。

2.创建一个画布

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <canvas id="mycanvas" width="100" height="100"></canvas> //创建画布用canvas标签
</body>
</html>
登入後複製

3.在画布上绘图。

<script type="text/javascript">
    //用javascript来绘制图像
    //获取到canvas元素
    var can=document.getElementById("mycanvas");
    //创建html5的内置对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
    var draw=can.getContext("2d");
    //fillStyle();可以是css的颜色，渐变，图案
    draw.fillStyle="red";
    //fillRect(x,y,width,height) 定义填充方式
    draw.fillRect(0,0,125,12);
    </script>
登入後複製

4.canvas-路径

var can=document.getElementById("mycanvas");
    var draw=can.getContext("2d");
    // 开始一个路径
    draw.beginPath();
    // 设置线的粗细
    draw.lineWidth="5";
    //设置线的颜色
    draw.strokeStyle="green";
    // 线的起点
    draw.moveTo(0,75);
    //线的终点 
    draw.lineTo(250,75);
    // 开始绘制路径
    draw.stroke();
    //开始另一个路径
    draw.beginPath();
    // 设置线的粗细
    draw.lineWidth="5";
    draw.strokeStyle="purple";
    draw.moveTo(25,05);
    draw.lineTo(35,25);
    draw.stroke();
登入後複製

效果：

html5：畫布

相關標籤：
html5：canvas
來源：php.cn
上一篇：基於html5，父級區塊中加入video，不能全螢幕播放的問題解決。 下一篇：模仿微信群組聊天的H5頁面
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
來自於 2024-04-06 15:33:12
0
1
433
PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
來自於 2024-04-05 12:57:00
0
1
456
取得畫布的*兩個*高度值？ 我正在嘗試獲取此畫布的兩個高度值。 <canvaswidth="886"height="792"style="display...
來自於 2024-04-05 09:32:33
0
1
1360
如何從多個畫布匯出 jpg 我有多個畫布，這些畫布用作圖層。 canvasc1=backgroundimage.canvasc2=charactorimage.canvasc3=itemimage.我的原始碼...
來自於 2024-04-03 21:02:43
0
1
319
HTML5中的enctype和formenctype有什麼差別？ 我只是想知道HTMLLivingStandard（又稱新的HTML5規範）中的屬性enctype和formenctype之間有什麼區別？我一直在閱讀《開發人員的HTML標準》，但似...
來自於 2024-04-02 11:47:56
0
1
275
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！