亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

[轉(zhuǎn)帖]學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

liguoquan
2023年11月28日 11:52 本文熱度 1725
:學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了


一、canvas 簡介

<canvas>HTML5 新增的,一個(gè)可以使用腳本(通常為 Javascript) 在其中繪制圖像的 HTML 元素。它可以用來制作照片集或者制作簡單(也不是那么簡單)的動(dòng)畫,甚至可以進(jìn)行實(shí)時(shí)視頻處理和渲染。

它最初由蘋果內(nèi)部使用自己 MacOS X WebKit 推出,供應(yīng)用程序使用像儀表盤的構(gòu)件和 Safari 瀏覽器使用。后來,有人通過 Gecko 內(nèi)核的瀏覽器 (尤其是 MozillaFirefox),OperaChrome 和超文本網(wǎng)絡(luò)應(yīng)用技術(shù)工作組建議為下一代的網(wǎng)絡(luò)技術(shù)使用該元素。

Canvas 是由 HTML 代碼配合高度和寬度屬性而定義出的可繪制區(qū)域。Javascript 代碼可以訪問該區(qū)域,類似于其他通用的二維 API,通過一套完整的繪圖函數(shù)來動(dòng)態(tài)生成圖形。

Mozilla 程序從 Gecko 1.8 (Firefox 1.5) 開始支持 <canvas>, Internet Explorer 從 IE9 開始 <canvas> 。Chrome 和 Opera 9+ 也支持 <canvas>。

二、Canvas基本使用

<canvas id="tutorial" width="300" height="300"></canvas>

2.1 <canvas> 元素

<canvas> 看起來和 <img> 標(biāo)簽一樣,只是 <canvas> 只有兩個(gè)可選的屬性 width、heigth 屬性,而沒有 src、alt 屬性。

如果不給 <canvas> 設(shè)置 widht、height 屬性時(shí),則默認(rèn) width為300、height 為 150,單位都是 px。也可以使用 css 屬性來設(shè)置寬高,但是如寬高屬性和初始比例不一致,他會(huì)出現(xiàn)扭曲。所以,建議永遠(yuǎn)不要使用 css 屬性來設(shè)置 <canvas> 的寬高。

替換內(nèi)容

由于某些較老的瀏覽器(尤其是 IE9 之前的 IE 瀏覽器)或者瀏覽器不支持 HTML 元素 <canvas>,在這些瀏覽器上你應(yīng)該總是能展示替代內(nèi)容。

支持 <canvas> 的瀏覽器會(huì)只渲染 <canvas> 標(biāo)簽,而忽略其中的替代內(nèi)容。不支持 <canvas> 的瀏覽器則 會(huì)直接渲染替代內(nèi)容。

用文本替換:

<canvas>
    你的瀏覽器不支持 canvas,請(qǐng)升級(jí)你的瀏覽器。
</canvas>

<img> 替換:

<canvas>
    <img decoding="async" src="./美女.jpg" alt=""> 
</canvas>

結(jié)束標(biāo)簽 </canvas> 不可省略。

<img> 元素不同,<canvas> 元素需要結(jié)束標(biāo)簽(</canvas>)。如果結(jié)束標(biāo)簽不存在,則文檔的其余部分會(huì)被認(rèn)為是替代內(nèi)容,將不會(huì)顯示出來。

2.2 渲染上下文(Thre Rending Context)

<canvas> 會(huì)創(chuàng)建一個(gè)固定大小的畫布,會(huì)公開一個(gè)或多個(gè)渲染上下文(畫筆),使用渲染上下文來繪制和處理要展示的內(nèi)容。

我們重點(diǎn)研究 2D 渲染上下文。 其他的上下文我們暫不研究,比如, WebGL 使用了基于 OpenGL ES的3D 上下文 ("experimental-webgl") 。

var canvas = document.getElementById('tutorial');
//獲得 2d 上下文對(duì)象
var ctx = canvas.getContext('2d');

2.3 檢測支持性

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

2.4 代碼模板

<html>
<head>
    <title>Canvas tutorial</title>
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
    function draw(){
        var canvas = document.getElementById('tutorial');
        if(!canvas.getContext) return;
      	var ctx = canvas.getContext("2d");
      	//開始代碼
        
    }
    draw();
</script>
</html>

2.5 一個(gè)簡單的例子

以下實(shí)例繪制兩個(gè)長方形:

實(shí)例

<html>
<head>
    <title>Canvas tutorial</title>
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
    function draw(){
        var canvas = document.getElementById('tutorial');
        if(!canvas.getContext) return;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgb(200,0,0)";
      	//繪制矩形
        ctx.fillRect (10, 10, 55, 50);
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
    }
    draw();
</script>
</html>

三、繪制形狀

3.1 柵格 (grid) 和坐標(biāo)空間

如下圖所示,canvas 元素默認(rèn)被網(wǎng)格所覆蓋。通常來說網(wǎng)格中的一個(gè)單元相當(dāng)于 canvas 元素中的一像素。柵格的起點(diǎn)為左上角,坐標(biāo)為 (0,0) 。所有元素的位置都相對(duì)于原點(diǎn)來定位。所以圖中藍(lán)色方形左上角的坐標(biāo)為距離左邊(X 軸)x 像素,距離上邊(Y 軸)y 像素,坐標(biāo)為 (x,y)。

后面我們會(huì)涉及到坐標(biāo)原點(diǎn)的平移、網(wǎng)格的旋轉(zhuǎn)以及縮放等。


Copyright 2010-2025 ClickSun All Rights Reserved