這篇文章主要介紹“html canvas怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“html canvas怎么使用”文章能幫助大家解決問題。
如果想要使用canvas，需要創建一個“畫家”。生成畫家的方法：
var huaban = document.querySelector('.canvas');//畫板
var bicaso = huaban.getContext('2d');//畫家 canvas上下文對象
//繪畫操作
//表示在距離畫板左上10px 10px的位置畫了一個長寬分別為50px的矩形，默認填充顏色黑色 繪制矩形
bicaso.fillRect(10,10,50,50);
//表示繪制輪廓線
bicaso.strokeRect(10,10,50,50);
//繪制畫筆顏色
bicaso.fillStyle='顏色';
//擦除矩形方法
bicaso.clearRect(x,y,要擦除的矩形寬度，要擦除的矩形高度);globalAlpha = transparencyValue: 這個屬性影響到 canvas 里所有圖形的透明度，有效的值范圍是 0.0 （完全透明）到 1.0（完全不透明），默認是 1.0。
globalAlpha 屬性在需要繪制大量擁有相同透明度的圖形時候相當高效。不過，我認為使用rgba()設置透明度更加好一些。
canvas基礎demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 在頁面中添加canvas元素 -->
<!--1. 創建一塊畫布。必須定義canvas的id屬性以方便js調用。 可以使用css控制canvas的外觀 -->
<canvas id="myCanvas" width="300" height="300" style="border: 2px solid red;">
<!-- 通過javascript可以在畫布中添加線條文字圖片動畫，也可以繪畫 -->
<!-- 有些瀏覽器不支持canvas元素，會直接忽略canvas元素顯示替代內容。所以需要為這些瀏覽器提供替代canvas的顯示內容 -->
您的瀏覽器不支持canvas，請更新或更換瀏覽器。
</canvas>
<canvas id="canvas2" width="300" height="300" style="border: 2px solid red;">您的瀏覽器不支持canvas</canvas>
<canvas id="tutorial" width="300" height="300" style="border: 2px solid red;">您的瀏覽器不支持canvas</canvas>
<script>
// 2.在js腳本中獲取到canvas元素
var canvas = document.getElementById('myCanvas');
// 判斷getContext()方法是否存在，來檢測瀏覽器是否支持canvas==========================
if(canvas.getContext) {
alert("您的瀏覽器支持canvas");
}else {
alert("您的瀏覽器不支持canvas");
}
// ===============================================================================
// 3.通過canvas的getContext()方法獲取畫布上下文，即創建context對象。以獲取允許進行繪畫的2D環境。 或者3D環境("3D")
var context = canvas.getContext("2d");//getContext("2d")該方法用于返回一個內建的h6對象，該對象提供了用于繪圖的方法和屬性，使用該對象可以在canvas畫布中繪制圖形。 相當于畫筆。
// 4.繪制圖形的操作 =============================================================================================================
//繪制一個矩形，填充色為藍色，矩形坐標為(10,10) 長50寬80。-------------------------------
context.fillStyle="blue";
context.fillRect(10,10,50,80);//strokeRect(x,y,width,height) clearRect(x, y, widh, height)：清除指定的矩形區域，然后這塊區域會變的完全透明。
// 循環生成若干個40px的小矩形，邊框顏色隨機-------------------------------------------------
function draw0(){
var canvas = document.getElementById('canvas2');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
for (var i = 0; i < 6; i++){//6行6列
for (var j = 0; j < 6; j++){
ctx.fillStyle = "rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})";
// ctx.fillStyle = "rgb(randomInt(0, 255),randomInt(0, 255),randomInt(0, 255))";
ctx.strokeRect(j * 50, i * 50, 40, 40);
// ctx.fillRect(j * 50, i * 50, 40, 40);
}
}
}
draw0();
/**
返回隨機的 [from, to] 之間的整數(包括from，也包括to) 顏色隨機生成失??？？？？？？？？？？？？？？？？
*/
function randomInt(from, to){
return parseInt(Math.random() * (to - from + 1) + from);
}
//繪制一條直線-------------------------------------------------
context.moveTo(0,0);
context.lineTo(200,30);
context.stroke();
// 繪制復雜圖形--------使用繪制路徑方法--------Math.sin()----Math.cos()------Math.PI------beginPath()---lineTo()----closePath()-----------
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();//開始一條路徑 或重置當前路徑
context.fillStyle = 'orange';//填充屬性設置
context.strokeStyle = 'yellow';//邊框樣式
context.lineWidth = '1';//邊框寬度
var x = Math.sin(0);//使用sin cos三角函數計算頂點坐標x,y
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;//Math.PI返回的是圓周率 π
for(var i = 0;i<30;i++) {//表示30個點的連線
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();//關閉路徑
context.fill();//填充 默認填充黑色
context.stroke();//邊框 默認黑色
// 繪制圓形----------------beginPath()----arc()-----closePath()-------------------------------
// arc(x,y,r,sAngle,eAngle,counterclockwise);---x,y表示圓心坐標---r表示圓版半徑---sAngle起始角【0】---eAngle結束角【2*Math.PI】---counterclockwise規定逆時針還是順時針繪圖（false順時針，true逆時針）
context.fillStyle = "blue";//設置畫筆填充顏色樣式
context.strokeStyle = 'red';//設置邊框顏色樣式
context.strokeWidth = '2';
context.beginPath();//開始創建路徑
context.arc(50,50,50,0,2*Math.PI,true);//圓心坐標(50,50) 半徑50 逆時針旋轉 從0°~360°
context.closePath();
context.fill();
context.stroke();
// 繪制14條弧形-------------------------0°表示水平線 +90°表示負y軸方向-----------------------------------------------------------
for(var i=0;i<15;i++) {
context.strokeStyle='red';
context.beginPath();
context.arc(10,300,i*10,0,Math.PI*3/2,true);//弧心坐標(0,300) 半徑10*i 逆時針旋轉0°~((1/2)π)° 逆時針旋轉0°~90°
context.closePath();//從當前點到開始點的閉合路徑操作
context.stroke();
}
// 繪制圓弧-------------通過使用控制點----arcTo(x1,y1,x2,y2,r);--控制點1坐標 控制點2坐標 圓弧半徑----------------------------------------
context.beginPath();
context.moveTo(150,150)//起點坐標
context.arcTo(200,150,200,250,60);//arcTo表示繪制的圖形由兩條切換所決定。l1為起始點和控制點1的直線，l2為控制點1和控制點2的直線
context.lineTo(250,250);//到達的下一點的坐標
context.stroke();//繪圖
context.fill();//填充
// 繪制路徑------------------------路徑都是閉合的----------------------------------
function draw1() {
context.fillStyle="orange";
context.beginPath();//新建一條路徑
context.moveTo(10,10);//將畫筆移動到指定坐標
context.lineTo(200,50);
context.lineTo(10,50);
context.closePath();//閉合
context.stroke();//繪制路徑
context.fill();//填充閉合區域
}
draw1();
// 透明度 Transparency(0.0,1.0) globalAlpha = transparencyValue; 如果不是大量需要設置透明度，用rgba就夠了
// lineWidth 線條寬度
// lineCap = type 線條末端樣式 butt--末端以方形結束 round--末端以圓形結束 square--末端以方形結束，但兩端都增加了一個長度為線寬一半的矩形區域
// lineJoin=type 線條接合處樣式 round--弧形 bevel--接合處以橫線為底 miter(默認)--接合處延申相連部分的外邊緣，形成靈性
function draw3(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
var lineJoin = ['round', 'bevel', 'miter'];
ctx.lineWidth = 20;
for (var i = 0; i < lineJoin.length; i++){
ctx.lineJoin = lineJoin[i];
ctx.beginPath();
ctx.moveTo(50, 50 + i * 50);
ctx.lineTo(100, 100 + i * 50);
ctx.lineTo(150, 50 + i * 50);
ctx.lineTo(200, 100 + i * 50);
ctx.lineTo(250, 50 + i * 50);
ctx.stroke();
}
}
draw3();
</script>
</body>
</html>關于“html canvas怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
