一. canvas簡(jiǎn)介

??canvas是html5新增的元素，主要用于圖形的繪制。canvas本身沒有繪圖能力，一切都是通過javascript來完成的。

二. canvas使用

在html中添加canvas元素，定義canvas元素的高寬

在javascript代碼中獲取canvas元素對(duì)象

var canvas = document.getelementbyid("canv");

調(diào)用該對(duì)象的getcontext(“2d”)方法獲取上下文

var context = canvas.getcontext("2d");

使用上下文對(duì)象在canvas上繪制圖形。繪制圖形的方法在下一部分介紹

三. 繪制圖形的方法

繪制直線

context.moveto(x, y); // 定義直線的起點(diǎn)

context.lineto(x, y); // 定義直線的終點(diǎn)

context.stroke(); // 繪制直線

繪制扇形(圓也可以認(rèn)為是扇形)

context.arc(originx, originy, r, startrad, stoprad); // 定義扇形(包括圓心坐標(biāo)，半徑以及開始繪制和結(jié)束繪制的弧度)

context.stroke(); // 繪制扇形

繪制矩形

context.fillrect(x, y, width, height); // 繪制矩形,(x,y)表示矩形左上角頂點(diǎn)的坐標(biāo)

繪制文本

context.filltext(text, x, y); // 繪制文本,(x, y)表示文本左下角的坐標(biāo)

繪制圖像

var img = document.getelementbyid("testimage"); // 獲取圖像元素對(duì)象

context.drawimage(img, x, y); // 繪制圖像，(x, y)表示圖像左上角坐標(biāo)

四. 上下文對(duì)象的屬性

fillstyle

?用來定義繪制樣式。可以在繪制直線，扇形，矩形和文本時(shí)使用。取值可以時(shí)顏色，漸變或圖案，默認(rèn)是顏色#000000。

context.fillstyle = "red"; // 設(shè)置繪制樣式為紅色

context.fillrect(x, y, width, height); // 此時(shí)矩形是紅色的

??? fillstyle的取值可以是漸變。創(chuàng)建漸變的代碼如下：

var grd = context.createlineargradient(x, y, x1, y1); // 創(chuàng)建線性漸變

grd.addcolorstop(0, "red"); // 設(shè)置漸變起始顏色為紅色

grd.addcolorstop(0, "blue"); // 設(shè)置漸變結(jié)束顏色為藍(lán)色

var grd = context.createradialgradient(x, y, r, x1, y1, r1); // 創(chuàng)建徑向漸變

grd.addcolorstop(0, "red"); // 設(shè)置漸變起始顏色為紅色

grd.addcolorstop(0, "blue"); // 設(shè)置漸變結(jié)束顏色為藍(lán)色

font

? 用來定義繪制文本時(shí)的使用字體。

context.font = "幼圓"; // 使用幼圓字體

context.filltext(text, x, y); // 使用幼圓字體繪制文本

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的html5的canvas元素使用,HTML5canvas元素概念及使用方法介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。