整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
anvas畫板
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas element size: 600 x 300, Canvas drawing surface size: 600 x 300</title>
<style>
body {
background: skyblue;
}
#canvas {
margin: 10px;
padding: 10px;
background: white;
border: thin inset gray;
}
</style>
</head>
<body>
<canvas id='canvas' width='600' height='300'>
Canvas not supported
</canvas>
<script src='example.js'></script>
</body>
</html>
實(shí)心字
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
//設(shè)置字體
context.font = '38px Arial';
//字體填充顏色
context.fillStyle = 'red';
//字體輪廓的顏色
context.strokeStyle = 'blue';
//實(shí)心字
context.fillText("程序員的365", canvas.width/2 - 150,canvas.height/2 + 15);
//空心字
context.strokeText("程序員的365", canvas.width/2 - 150,canvas.height/2 + 15 );
空心字
選擇字體
根據(jù)繪制實(shí)心字還是空心字選擇填充顏色或描邊顏色
填充字體或?qū)ψ煮w進(jìn)行描邊
實(shí)心空心結(jié)合
歡迎大家關(guān)注我的頭條號(hào)，持續(xù)更新，非常感謝！
TML5 Canvas API 是一個(gè)強(qiáng)大的圖形系統(tǒng)，它允許開發(fā)者在網(wǎng)頁上繪制2D圖形。自從 HTML5 標(biāo)準(zhǔn)推出以來，Canvas API 已經(jīng)成為了網(wǎng)頁游戲開發(fā)、數(shù)據(jù)可視化、圖像處理等領(lǐng)域的關(guān)鍵技術(shù)。在本文中，我將介紹 Canvas API 的基礎(chǔ)知識(shí)，并通過幾個(gè)實(shí)例演示如何使用 Canvas API 來創(chuàng)建簡(jiǎn)單的圖形和動(dòng)畫。
Canvas API 提供了一個(gè)通過 JavaScript 和 HTML <canvas> 元素來繪制圖形的方式。它可以用來繪制簡(jiǎn)單的直線、圓形、復(fù)雜的圖形，甚至可以用來制作動(dòng)畫。Canvas API 是基于像素的，這意味著一旦圖形被繪制，它就變成了畫布上的像素集合。
在開始使用 Canvas 繪圖之前，你需要在 HTML 文檔中添加 <canvas> 標(biāo)簽，并通過 JavaScript 獲取該元素的引用和繪圖上下文。下面是基本的設(shè)置步驟：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Canvas 基礎(chǔ)示例</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* 添加陰影效果 */
background-color: #fff; /* 設(shè)置畫布背景色 */
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;">
您的瀏覽器不支持Canvas。
</canvas>
<script>
// 獲取 canvas 元素
var canvas = document.getElementById('myCanvas');
// 獲取繪圖上下文
var ctx = canvas.getContext('2d');
// 繪制藍(lán)色矩形
ctx.fillStyle = 'blue'; // 設(shè)置填充顏色為藍(lán)色
ctx.fillRect(10, 10, 150, 100); // 繪制矩形
// 繪制紅色圓形
ctx.beginPath(); // 開始路徑繪制
ctx.arc(300, 150, 50, 0, Math.PI * 2, true); // 繪制圓形
ctx.fillStyle = 'red'; // 設(shè)置填充顏色為紅色
ctx.fill(); // 填充圓形
// 繪制黑色邊框的文字
ctx.font = '20px Arial'; // 設(shè)置字體
ctx.fillStyle = 'black'; // 設(shè)置填充顏色為黑色
ctx.fillText('Hello Canvas', 120, 250); // 繪制文字
</script>
</body>
</html>
在這個(gè)示例中，我們首先通過CSS將頁面背景設(shè)置為淺灰色，并將Canvas居中顯示，為Canvas添加了陰影效果，使其在頁面上更加突出。
接著，通過JavaScript在Canvas上繪制了一個(gè)藍(lán)色的矩形、一個(gè)紅色的圓形，以及帶有黑色邊框的文字“Hello Canvas”，以展示Canvas的基本繪圖功能。
Canvas API 的基礎(chǔ)是能夠繪制簡(jiǎn)單的形狀，比如矩形。下面的示例展示了如何繪制一個(gè)填充的矩形和一個(gè)矩形輪廓。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>繪制矩形示例</title>
</head>
<body>
<canvas id="rectangleCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>
<script>
var canvas = document.getElementById('rectangleCanvas');
var ctx = canvas.getContext('2d');
// 繪制填充矩形
ctx.fillStyle = 'blue'; // 設(shè)置填充顏色
ctx.fillRect(50, 50, 150, 100); // 填充矩形
// 繪制矩形輪廓
ctx.strokeStyle = 'red'; // 設(shè)置輪廓顏色
ctx.strokeRect(250, 50, 150, 100); // 繪制矩形輪廓
</script>
</body>
</html>
在這個(gè)示例中，我們使用了 fillRect 方法來繪制一個(gè)藍(lán)色填充的矩形，使用了 strokeRect 方法來繪制一個(gè)紅色輪廓的矩形。
Canvas API 允許你創(chuàng)建復(fù)雜的路徑和形狀。下面的示例展示了如何繪制一個(gè)路徑，這個(gè)路徑組成了一個(gè)三角形。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>繪制路徑和形狀示例</title>
</head>
<body>
<canvas id="pathCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>
<script>
var canvas = document.getElementById('pathCanvas');
var ctx = canvas.getContext('2d');
// 開始路徑
ctx.beginPath();
// 移動(dòng)到起點(diǎn)
ctx.moveTo(100, 100);
// 繪制線條
ctx.lineTo(200, 100);
ctx.lineTo(150, 200);
// 關(guān)閉路徑形成三角形
ctx.closePath();
// 繪制路徑
ctx.fillStyle = 'green';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.stroke();
</script>
</body>
</html>
在這個(gè)示例中，我們使用了 beginPath 方法開始一個(gè)新路徑，使用 moveTo 和 lineTo 方法定義路徑，然后使用 closePath 方法關(guān)閉路徑。最后，我們使用 fill 方法填充路徑，并使用 stroke 方法繪制路徑的輪廓。
Canvas API 也可以用來創(chuàng)建動(dòng)畫。下面的示例展示了如何創(chuàng)建一個(gè)簡(jiǎn)單的動(dòng)畫，其中一個(gè)藍(lán)色的球在畫布上移動(dòng)。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Canvas 動(dòng)畫示例</title>
</head>
<body>
<canvas id="animationCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>
<script>
var canvas = document.getElementById('animationCanvas');
var ctx = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 20;
var dx = 2;
var dy = -2;
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.closePath();
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
if(x + dx > canvas.width-radius || x + dx < radius) {
dx = -dx;
}
if(y + dy > canvas.height-radius || y + dy < radius) {
dy = -dy;
}
x += dx;
y += dy;
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>
在這個(gè)示例中，我們定義了一個(gè) drawBall 函數(shù)來繪制球，然后在 update 函數(shù)中移動(dòng)球的位置并反復(fù)調(diào)用 requestAnimationFrame(update) 來創(chuàng)建動(dòng)畫效果。
Canvas API 是一個(gè)功能強(qiáng)大的工具，它為前端開發(fā)者提供了廣泛的圖形繪制能力。通過上述示例，我們可以看到，Canvas API 不僅可以用來繪制靜態(tài)圖形，還可以創(chuàng)建動(dòng)態(tài)的、交互式的應(yīng)用。隨著技術(shù)的不斷發(fā)展，Canvas API 的應(yīng)用場(chǎng)景將會(huì)越來越廣泛，作為一名前端工程師，掌握 Canvas API 將是一個(gè)非常有價(jià)值的技能。
lt;canvas> 標(biāo)簽定義圖形，比如圖表和其他圖像，你必須使用腳本來繪制圖形。
比如在畫布上（Canvas）畫一個(gè)紅色矩形，漸變矩形，彩色矩形，和一些彩色的文字。
什么是 canvas?
HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成.
<canvas> 標(biāo)簽只是圖形容器，您必須使用腳本來繪制圖形。
你可以通過多種方法使用 canvas 繪制路徑,盒、圓、字符以及添加圖像。
iphone
創(chuàng)建一個(gè)畫布（Canvas）
一個(gè)畫布在網(wǎng)頁中是一個(gè)矩形框，通過 <canvas> 元素來繪制。
注意: 默認(rèn)情況下 <canvas> 元素沒有邊框和內(nèi)容。
<canvas>簡(jiǎn)單實(shí)例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
注意: 標(biāo)簽通常需要指定一個(gè)id屬性 (腳本中經(jīng)常引用), width 和 height 屬性定義的畫布的大小。
提示:你可以在HTML頁面中使用多個(gè) <canvas> 元素.
1.使用 style 屬性來添加邊框:
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
2.使用 JavaScript 來繪制圖像
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
實(shí)例解析:
3.首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
4.然后，創(chuàng)建 context 對(duì)象：
var ctx=c.getContext("2d");
getContext("2d") 對(duì)象是內(nèi)建的 HTML5 對(duì)象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
下面的兩行代碼繪制一個(gè)紅色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
設(shè)置fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 默認(rèn)設(shè)置是#000000（黑色）。
fillRect(x,y,width,height) 方法定義了矩形當(dāng)前的填充方式。
iphone
Canvas 坐標(biāo)
canvas 是一個(gè)二維網(wǎng)格。
canvas 的左上角坐標(biāo)為 (0,0)
上面的 fillRect 方法擁有參數(shù) (0,0,150,75)。
意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。
坐標(biāo)實(shí)例
如下圖所示，畫布的 X 和 Y 坐標(biāo)用于在畫布上對(duì)繪畫進(jìn)行定位。鼠標(biāo)移動(dòng)的矩形框上，顯示定位坐標(biāo)。
Canvas - 路徑
在Canvas上畫線，我們將使用以下兩種方法：
moveTo(x,y) 定義線條開始坐標(biāo)
lineTo(x,y) 定義線條結(jié)束坐標(biāo)
繪制線條我們必須使用到 "ink" 的方法，就像stroke().
定義開始坐標(biāo)(0,0), 和結(jié)束坐標(biāo) (200,100)。然后使用 stroke() 方法來繪制線條:
Canvas - 文本
使用 canvas 繪制文本，重要的屬性和方法如下：
font - 定義字體
fillText(text,x,y) - 在 canvas 上繪制實(shí)心的文本
strokeText(text,x,y) - 在 canvas 上繪制空心的文本
使用 fillText():
使用 "Arial" 字體在畫布上繪制一個(gè)高 30px 的文字（實(shí)心）：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
大家有沒有學(xué)會(huì)呢？沒學(xué)會(huì)的話記得私信小編"011"哦~
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
