怎么入門html5繪制圖形？你需要了解這幾點！

tml5中是怎么實現繪制圖形？

html5中可以實現繪畫圖形的功能，需要注意的是html5只提供2D，不提供3D繪畫功能。canvas元素是H5總新增的元素，它用來專門繪制圖形。你也可以把canvas元素理解成一塊“畫布”，我們可以在其中繪制圖形。在canvas元素中繪畫不是拿鼠標來繪制圖形，實際上在H5完成繪畫功能，不僅僅需要canvas元素，而且需要JavaScript腳本來配合才能完成繪制圖形。所以說把html5中的canvas元素理解成畫布是是合適不過的。

html5中的canvas元素

canvas元素必須要指定id、width（寬）、height（高）屬性，雖然canvas元素是H5中用來繪制的圖形，但是它的放置放和其他的元素沒有區別。比如說canvas id="myCanvas" width="200" height="100"是放置了一個200*100的canvas元素。

html5中的常用的繪制圖形

繪制矩形

創建canvas元素→取得上下文（使用canvas對象的getcontent方法獲得上下文）→填充繪制邊框→設定樣式→指定線寬、顏色。代碼如下圖：

可以用clearRect方法擦除指定區域的圖形，使矩形區域顏色變透明，context.clearRect(x,y,width,height)。

繪制圓形

繪制圓形要比矩形復雜一點，需要使用到路徑，創建圖形路徑→關閉路徑→調用繪制方法、路徑。代碼如下：

cxt.beginPath();是開始創建路徑，有幾次是循環創建路徑，每次開始都需要調用beginPath()函數。

cxt.arc(70,18,15,0,Math.PI*2,true);是是創建路徑，使用了arc（）方法，它的語法如下：

cxt.closePath();cxt.fill();關閉繪畫路徑后調用繪制路徑。最后給大家一個作業，你可以試試下面的代碼在瀏覽器執行后會是什么圖形？

關于“html5中繪制圖形”先聊到這。每天學習一個知識點，每日寄語”人生之苦，苦在選擇，人生之難，難在放棄”如轉載清標明出處。

紹HTML5中的一個新增元素——canvas元素以及伴隨這個元素而來的一套編程接口——canvas API。

使用canvas API可以在頁面上繪制出任何你想要的、非常漂亮的圖形與圖像，創造出更加豐富多彩、賞心悅目的Web頁面。

通過閱讀，您可以：

　掌握canvas元素的基本概念

　學會如何在頁面上放置一個canvas元素

　學會如何使用canvas元素繪制出一個簡單矩形

　掌握使用路徑的方法，能夠利用路徑繪制出圓形與多邊形

　掌握漸變圖形的繪制方法，學會圖形變形、圖形縮放、圖形組合以及給圖形繪制陰影的方法

　掌握在canvas畫布中使用圖像的方法

　掌握如何在畫布中繪制文字，給文字加上邊框的方法

　掌握如何保存及恢復繪圖狀態

canvas的基礎知識

HTML5中的canvas有很多功能，這里只介紹HTML5中canvas的一些基礎知識，

并展示一些可以使用畫布元素實現的實用的內容，例如處理來自畫布中的一幅圖像的單個像素。

　canvas的由來

canvas的概念最初是由蘋果公司提出的，

用于在Mac OS X WebKit中創建控制板部件（Dashboard Widget）。

在canvas出現之前，開發人員若要在瀏覽器中使用繪圖API，

只能使用Adobe的Flash和SVG（可伸縮矢量圖形）插件，或者只有IE才支持的VML（矢量標記語言），

以及JavaScript中的一些技術。假設我們要在沒有canvas元素的條件下繪制一條對角線，

此時如果沒有一套二維繪圖API的話，這會是一項相當復雜的工作。

HTML5中的canvas就能夠提供這樣的功能，對瀏覽器端來說這個功能非常有用，

因此canvas被納入了HTML5規范。

最靠譜的WEB前端教程——整整140集，全程干貨無廢話，學完變大佬！

碼：

<!DOCTYPE html>

<html>

<head>

<title>中國標準國旗</title>

</head>

<body>

/**

使用HTML5繪制標準五星紅旗

var canvas = document.getElementById(“canvas”);

var context = canvas.getContext(‘2d’);

var width=canvas.width;

var height=width*2/3;

var w=width/30;//小網格的寬

context.fillStyle=”red”;

context.fillRect(0,0,width,height);

var maxR = 0.15, minR = 0.05;//

var maxX = 0.25, maxY = 0.25;//大五星的位置

var minX = [0.50, 0.60, 0.60, 0.50];

var minY = [0.10, 0.20, 0.35, 0.45];

// 畫大☆

var ox = height * maxX, oy = height * maxY;

create5star(context,ox,oy,height * maxR,”#ff0″,0);//繪制五角星

// 畫小★

for (var idx = 0; idx < 4; idx++) {

var sx = minX[idx] * height, sy = minY[idx] * height;

var theta = Math.atan((oy – sy)/(ox – sx));

create5star(context,sx, sy, height * minR, “#ff0”,-Math.PI/2+theta);

}

//輔助線

context.moveTo(0,height/2)

context.lineTo(width,height/2);

context.stroke();

context.moveTo(width/2,0);

context.lineTo(width/2,height);

context.stroke();

//畫網格，豎線

for(var j=0;j< 15;j++){

context.moveTo(j*w,0);

context.lineTo(j*w,height/2);

context.stroke();

}

//畫網格，橫線

for(var j=0;j< 10;j++){

context.moveTo(0,j*w);

context.lineTo(width/2,j*w);

context.stroke();

}

//畫大圓

context.beginPath();

context.arc(ox,oy,maxR*height,0,Math.PI*2,false);

context.closePath();

context.stroke();

// 畫小圓

for (var idx = 0; idx < 4; idx++) {

context.beginPath();

var sx = minX[idx] * height, sy = minY[idx] * height;

context.arc(sx, sy, height * minR,0,Math.PI*2,false);

context.closePath();

context.stroke();

}

//大圓中心與小圓中心連接線

for (var idx = 0; idx < 4; idx++) {

context.moveTo(ox,oy);

var sx = minX[idx] * height, sy = minY[idx] * height;

context.lineTo(sx, sy);

context.stroke();

}

//繪制五角星

/**

* 創建一個五角星形狀. 該五角星的中心坐標為(sx,sy),中心到頂點的距離為radius,rotate=0時一個頂點在對稱軸上

* rotate:繞對稱軸旋轉rotate弧度

function create5star(context,sx,sy,radius,color,rotato){

context.save();

context.fillStyle=color;

context.translate(sx,sy);//移動坐標原點

context.rotate(Math.PI+rotato);//旋轉

context.beginPath();//創建路徑

var x = Math.sin(0);

var y= Math.cos(0);

var dig = Math.PI/5 *4;

for(var i = 0;i< 5;i++){//畫五角星的五條邊

var x = Math.sin(i*dig);

在線咨詢

上一篇：html基礎必備-分隔標記，前端小白一看就會
下一篇：PDF編輯操作圖文：PDF轉HTML批量操作技巧，提升文檔格式轉換效率

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

怎么入門html5繪制圖形？你需要了解這幾點！

您的項目需求