H5的CanvasAPI怎麼繪製圖形-H5教程-PHP中文網

H5的CanvasAPI怎麼繪製圖形

php中世界最好的语言

發布： 2018-01-09 09:51:02

原創

2379 人瀏覽過

這次帶給大家H5的CanvasAPI怎麼繪製圖形，怎麼用Canvas製作圖形？ Canvas製作圖形的注意事項有哪些，以下就是實戰案例，一起來看一下。

Canvas元素
以下html程式碼定義了一個canvas元素。

<!DOCTYPE html>  
<html>  
<head>  
    <title>Canvas快速入门</title>  
    <meta charset="utf-8"/>  
</head>  
<body>  
<div>  
    <canvas id="mainCanvas" width="640" height="480"></canvas>  
</div>  
</body>  
</html>

登入後複製

透過以下Javascript語句存取canvas元素：

//DOM写法   
window.onload = function () {   
    var canvas = document.getElementById("mainCanvas");   
    var context = canvas.getContext("2d");   
};   
//jQuery写法   
$(document).ready(function () {   
    var canvas = $("#mainCanvas");   
    var context = canvas.get(0).getContext("2d");   
});   
//接下来就可以调用context的方法来调用绘图API

登入後複製

2. 基礎API
2.1 座標系統
Canvas 2D渲染上下文採用平面笛卡爾座標系統，左上角為原點(0,0)，座標系統的1個單位相當於螢幕的1個像素。

//绘制一个填充矩形   
context.fillRect(x, y, width, height)   
//绘制一个边框矩形   
context.strokeRect(x, y, width, height)   
//清除一个矩形区域   
context.clearRect(x, y, width, height)

登入後複製

2.2.2 線條
繪製線條與繪製圖形有些區別，線條實際上稱為路徑。要繪製一條簡單的路徑，首先必須呼叫beginPath方法，接著呼叫moveTo設定路徑的起點座標，然後呼叫lineTo設定線段終點座標（可多次設定），再呼叫closePath完成路徑繪製。最後調用stroke繪製輪廓（或調用fill填充路徑）。以下為例子：

//示例   
context.beginPath();    //开始路径   
context.moveTo(40, 40);    //移动到点(40,40)   
context.lineTo(300, 40);    //画线到点(300,30)   
context.lineTo(40, 300);    //画线到点(40,300)   
context.closePath();    //结束路径   
context.stroke();    //绘制轮廓   
//或者填充用context.fill();

登入後複製

2.2.3 圓形
Canvas其實並沒有專門繪製圓形的方法，可以透過畫圓弧來模擬圓形。由於圓弧是一種路徑，畫圓弧的API應該包含在beginPath和closePath之間。
2.3 樣式
2.3.1 修改線條顏色

var color;   
//指定RGB值   
color = "rgb(255, 0, 0)";   
//指定RGBA值（最后一个参数为alpha值，取值0.0~1.0）   
color = "rgba(255, 0, 0, 1)";   
//指定16进制码   
color = "#FF0000";   
//用单词指定   
color = "red";   
//设置填充颜色   
context.fillStyle = color;   
//设置边框颜色   
context.strokeStyle = color;

登入後複製

2.3.2 修改線寬

//指定线宽值   
var value= 3;   
//设置边框颜色   
context.linewidth = value;

登入後複製

2.4 繪製文字

#//指定字體樣式

context.font = "italic 30px 黑體";

//在點(40,40)處畫文字

context.fillText("Hello world!", 40,

context.fillText("Hello world!", 40, 40);

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：
bootstrap裡如何統計table sum的數量

怎麼用JS做出切換隱藏與顯示同時切換圖示

怎麼用JS做出按鈕停用並啟用

######

以上是H5的CanvasAPI怎麼繪製圖形的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

H5的CanvasAPI怎麼繪製圖形