html5canvas詳細(xì)使用教程
話不多說，請(qǐng)看代碼
專業(yè)領(lǐng)域包括成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、商城網(wǎng)站建設(shè)、微信營銷、系統(tǒng)平臺(tái)開發(fā)， 與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同，創(chuàng)新互聯(lián)的整合解決方案結(jié)合了幫做網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。
<!DOCTYPE html ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function draw21(id) {
var canvas = document.getElementById(id)
if (canvas == null)
return false;
var context = canvas.getContext("2d");
//實(shí)踐表明在不設(shè)施fillStyle下的默認(rèn)fillStyle=black
context.fillRect(0, 0, 100, 100);
//實(shí)踐表明在不設(shè)施strokeStyle下的默認(rèn)strokeStyle=black
context.strokeRect(120, 0, 100, 100);
//設(shè)置純色
context.fillStyle = "red";
context.strokeStyle = "blue";
context.fillRect(0, 120, 100, 100);
context.strokeRect(120, 120, 100, 100);
//設(shè)置透明度實(shí)踐證明透明度值>0,<1值越低，越透明，值>=1時(shí)為純色，值<=0時(shí)為完全透明
context.fillStyle = "rgba(255,0,0,0.2)";
context.strokeStyle = "rgba(255,0,0,0.2)";
context.fillRect(240,0 , 100, 100);
context.strokeRect(240, 120, 100, 100);
}
function draw22(id) {
var canvas = document.getElementById(id)
if (canvas == null)
return false;
var context = canvas.getContext("2d");
//實(shí)踐表明在不設(shè)施fillStyle下的默認(rèn)fillStyle=black
context.fillRect(0, 0, 100, 100);
//實(shí)踐表明在不設(shè)施strokeStyle下的默認(rèn)strokeStyle=black
context.strokeRect(120, 0, 100, 100);
//設(shè)置純色
context.fillStyle = "red";
context.strokeStyle = "blue";
context.fillRect(0, 120, 100, 100);
context.strokeRect(120, 120, 100, 100);
//設(shè)置透明度實(shí)踐證明透明度值>0,<1值越低，越透明，值>=1時(shí)為純色，值<=0時(shí)為完全透明
context.fillStyle = "rgba(255,0,0,0.2)";
context.strokeStyle = "rgba(255,0,0,0.2)";
context.fillRect(240, 0, 100, 100);
context.strokeRect(240, 120, 100, 100);
context.clearRect(50, 50, 240, 120);
}
function draw23(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext('2d');
var n = 0;
//左側(cè)1/4圓弧
context.beginPath();
context.arc(100, 150, 50, 0, Math.PI/2 , false);
context.fillStyle = 'rgba(255,0,0,0.25)';
context.fill();
context.strokeStyle = 'rgba(255,0,0,0.25)'
context.closePath();
context.stroke();
//右側(cè)1/4圓弧
context.beginPath();
context.arc(300, 150, 50, 0, Math.PI/2 , false);
context.fillStyle = 'rgba(255,0,0,0.25)';
context.fill();
context.strokeStyle = 'rgba(255,0,0,0.25)';
context.closePath();
context.stroke();
}
function draw0(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext('2d');
context.beginPath();
context.arc(200, 150, 100, 0, Math.PI * 2, true);
//不關(guān)閉路徑路徑會(huì)一直保留下去，當(dāng)然也可以利用這個(gè)特點(diǎn)做出意想不到的效果
context.closePath();
context.fillStyle = 'rgba(0,255,0,0.25)';
context.fill();
}
function draw1(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.fillStyle = 'rgb(100,255,100)';
context.strokeStyle = 'rgb(0,0,100)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;
for (var i = 0; i < 30; i++) {
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();
}
function draw2(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext("2d");
context.fillStyle = "#EEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.globalCompositeOperation = 'and';
context.fillStyle = 'rgb(100,255,100)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;
context.moveTo(dx, dy);
for (var i = 0; i < 30; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s);
}
context.closePath();
context.fill();
context.stroke();
}
function draw24(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext("2d");
context.moveTo(50, 50);
context.bezierCurveTo(50, 50,150, 50, 150, 150);
context.stroke();
context.quadraticCurveTo(150, 250, 250, 250);
context.stroke();
}
function draw25(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createLinearGradient(0, 0, 0, 300);
g1.addColorStop(0, 'rgb(255,0,0)'); //紅
g1.addColorStop(0.5, 'rgb(0,255,0)');//綠
g1.addColorStop(1, 'rgb(0,0,255)'); //藍(lán)
//可以把lg對(duì)象理解成GDI中線性brush
context.fillStyle = g1;
//再用這個(gè)brush來畫正方形
context.fillRect(0, 0, 400, 300);
}
function draw3(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createLinearGradient(0, 0, 0, 300);
g1.addColorStop(0,'rgb(255,255,0)');//淺綠
g1.addColorStop(1,'rgb(0,255,255)');//淺藍(lán)
context.fillStyle = g1;
context.fillRect(0, 0, 400, 300);
var n = 0;
var g2 = context.createLinearGradient(0, 0, 300, 0);
g2.addColorStop(0, 'rgba(0,0,255,0.5)');//藍(lán)色
g2.addColorStop(1, 'rgba(255,0,0,0.5)');//紅色
for (var i = 0; i < 10; i++) {
context.beginPath();
context.fillStyle = g2;
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}
}
function draw26(id) {
//同一個(gè)圓心畫球型
/*var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 100);
g1.addColorStop(0.1, 'rgb(255,0,0)');
g1.addColorStop(1, 'rgb(50,0,0)');
context.fillStyle = g1;
context.beginPath();
context.arc(200, 150, 100, 0, Math.PI * 2, true);
context.closePath();
context.fill();*/
//不同圓心看徑向漸變模型
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createRadialGradient(100, 150, 10, 300, 150, 50);
g1.addColorStop(0.1, 'rgb(255,0,0)');
g1.addColorStop(0.5, 'rgb(0,255,0)');
g1.addColorStop(1, 'rgb(0,0,255)');
context.fillStyle = g1;
context.fillRect(0, 0, 400, 300);
}
function draw27(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'rgba(100,100,100,0.5)';
context.shadowBlur = 1.5;
context.fillStyle = 'rgba(255,0,0,0.5)';
context.fillRect(100, 100, 200, 100);
}
function draw4(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400);
g1.addColorStop(0.1, 'rgb(255,255,0)');
g1.addColorStop(0.3, 'rgb(255,0,255)');
g1.addColorStop(1, 'rgb(0,255,255)');
context.fillStyle = g1;
context.fillRect(0, 0, 400, 300);
var n = 0;
// var g2 = context.createRadialGradient(250, 250, 0, 250, 250, 300);
// g2.addColorStop(0.1, 'rgba(255,0,0,0.5)');
// g2.addColorStop(0.7, 'rgba(255,255,0,0.5)');
// g2.addColorStop(1, 'rgba(0,0,255,0.5)');
for (var i = 0; i < 10; i++) {
var g2 = context.createRadialGradient(i * 25, i * 25, 0, i * 25, i * 25, i * 10);
g2.addColorStop(0.1, 'rgba(255,0,0,0.5)');
g2.addColorStop(0.7, 'rgba(255,255,0,0.5)');
g2.addColorStop(1, 'rgba(0,0,255,0.5)');
context.beginPath();
context.fillStyle = g2;
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.fill();
}
}
function draw5(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.save(); //保存了當(dāng)前context的狀態(tài)
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.fillStyle = "rgba(255,0,0,0.1)";
//平移 縮放 旋轉(zhuǎn) 1 2 3
context.translate(100, 100);
context.scale(0.5, 0.5);
context.rotate(Math.PI / 4);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢復(fù)到剛剛保存的狀態(tài),保存恢復(fù)只能使用一次
context.save(); //保存了當(dāng)前context的狀態(tài)
context.fillStyle = "rgba(255,0,0,0.2)";
//平移 旋轉(zhuǎn) 縮放 1 3 2
context.translate(100, 100);
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢復(fù)到剛剛保存的狀態(tài)
context.save(); //保存了當(dāng)前context的狀態(tài)
context.fillStyle = "rgba(255,0,0,0.3)";
//縮放 平移 旋轉(zhuǎn) 2 1 3
context.scale(0.5, 0.5);
context.translate(100, 100);
context.rotate(Math.PI / 4);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢復(fù)到剛剛保存的狀態(tài)
context.save(); //保存了當(dāng)前context的狀態(tài)
context.fillStyle = "rgba(255,0,0,0.4)";
//縮放 旋轉(zhuǎn) 平移 2 3 1
context.scale(0.5, 0.5);
context.rotate(Math.PI / 4);
context.translate(100, 100);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢復(fù)到剛剛保存的狀態(tài)
context.save(); //保存了當(dāng)前context的狀態(tài)
context.fillStyle = "rgba(255,0,0,0.5)";
//旋轉(zhuǎn) 平移 縮放 3 1 2
context.rotate(Math.PI / 4);
context.translate(100, 100);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢復(fù)到剛剛保存的狀態(tài)
context.save(); //保存了當(dāng)前context的狀態(tài)
context.fillStyle = "rgba(255,0,0,1)";
//旋轉(zhuǎn) 縮放 平移 3 2 1
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.translate(100, 100);
context.fillRect(0, 0, 100, 100);
//實(shí)驗(yàn)表明應(yīng)該移動(dòng)的是坐標(biāo)軸
//實(shí)驗(yàn)表明縮放的是坐標(biāo)軸比例
//實(shí)驗(yàn)表明旋轉(zhuǎn)的是坐標(biāo)軸
//綜合上述，因此平移 縮放 旋轉(zhuǎn) 三者的順序不同都將畫出不同的結(jié)果
}
function draw6(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
//圖形繪制
context.translate(200, 50);
context.fillStyle = 'rgba(255,0,0,0.25)';
for (var i = 0; i < 50; i++) {
//實(shí)驗(yàn)表明translate、scale、rotate都是在原有的context屬性上調(diào)整的
context.translate(25, 25);
context.scale(0.95, 0.95);
context.rotate(Math.PI / 10);
context.fillRect(0, 0, 100, 50);
}
}
function draw7(id) {
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
//圖形繪制
context.translate(200, 50);
for (var i = 0; i < 50; i++) {
context.translate(25, 25);
context.scale(0.95, 0.95);
context.rotate(Math.PI / 10);
create5Star(context);
context.fill();
}
}
function draw8(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
//context.beginPath();
context.strokeStyle = "rgb(250,0,0)";
context.fillStyle = "rgb(250,0,0)"
//實(shí)驗(yàn)證明第一次lineTo的時(shí)候和moveTo功能一樣
context.lineTo(100, 100);
//之后的lineTo會(huì)以上次lineTo的節(jié)點(diǎn)為開始
context.lineTo(200, 200);
context.lineTo(200, 100);
context.moveTo(200, 50);
context.lineTo(100,50);
context.stroke();
}
function draw9(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
//定義顏色
var colors = ["red", "orange", "yellow", "green", "blue", "navy", "perple"];
//定義線寬
context.lineWidth = 10;
context.transform(1,0,0,1,100,0)
//循環(huán)繪制圓弧
for (var i = 0; i < colors.length; i++) {
//定義每次向下移動(dòng)10個(gè)像素的變換矩陣
context.transform(1, 0, 0, 1, 0, 10);
//設(shè)定顏色
context.strokeStyle = colors[i];
context.beginPath();
context.arc(50, 100, 100, 0, Math.PI, true);
context.stroke();
}
}
function draw10(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext("2d");
var oprtns = new Array(
"source-over",
"destination-over",
"source-in",
"destination-in",
"source-out",
"destination-out",
"source-atop",
"destination-atop",
"lighter",
"xor",
"copy"
);
var i = 0;//組合效果編號(hào)
//結(jié)合setinterval動(dòng)態(tài)顯示組合
var interal = setInterval(function () {
if (i == 10) {
i=0;
}
else {
i++;
}
//每次重繪前清空
context.clearRect(0,0,400,300)
//藍(lán)色矩形
context.fillStyle = "blue";
context.fillRect(10, 10, 60, 60);
//設(shè)置組合方式
context.globalCompositeOperation = oprtns[i];
//設(shè)置新圖形（紅色圓形）
context.beginPath();
context.fillStyle = "red";
context.arc(60, 60, 30, 0, Math.PI * 2, false);
context.fill();
}, 1000);
}
function create5Star(context) {
var n = 0;
var dx = 100;
var dy = 0;
var s = 50;
//創(chuàng)建路徑
context.beginPath();
context.fillStyle = 'rgba(255,0,0,0.5)';
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);
var y = Math.cos(i * dig);
context.lineTo(dx + x * s, dy + y * s);
}
context.closePath();
}
function draw11(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'rgba(100,100,100,0.5)';
context.shadowBlur =5;
//圖形繪制
context.translate(0, 50);
for (var i = 0; i < 3; i++) {
context.translate(50, 50);
create5Star(context);
context.fill();
}
}
//drawImage(image,x,y)
function draw28(id) {
var image = new Image();
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
image.onload = function () {
context.drawImage(image,0,0);
}
}
//drawImage(image,x,y,w,h)
function draw12(id) {
var image = new Image();
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
image.onload = function () {
context.drawImage(image, 50, 50, 300, 200);
}
}
//drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
function draw13(id){
var image = new Image();
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
image.onload = function () {
context.drawImage(image, 100, 100, 200, 150,50,50,300,200);//這里取的是實(shí)際尺寸
}
}
function draw14(id) {
//傳統(tǒng)的平鋪是用for循環(huán)來處理的，現(xiàn)在直接調(diào)用接口
var image = new Image();
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
var type = ["no-repeat", "repeat-x", "repeat-y", "repeat"];
var i = 0;
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
image.onload = function () {
var interval = setInterval(function () {
//每次轉(zhuǎn)換平鋪類型清空
context.clearRect(0, 0, 400, 300);
if (i >= 4) {
i = 0;
}
var ptrn = context.createPattern(image, type[i]);
context.fillStyle = ptrn;
context.fillRect(0, 0, 400, 300);
i++;
}, 1000);
};
}
//圖像裁剪
function draw15(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "black";
context.fillRect(0, 0, 400, 300);
image = new Image();
image.onload = function () {
drawImg(context,image);
}
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"
}
function drawImg(context, image) {
//圓形裁剪區(qū)
//createCircleClip(context)
//星形裁剪區(qū)
create5StarClip(context);
context.drawImage(image,0,0);
}
function createCircleClip(context) {
context.beginPath();
context.arc(200, 150, 100, 0, Math.PI * 2, true);
context.closePath();
context.clip();
}
function create5StarClip(context) {
var n = 0;
var dx = 200;
var dy = 135;
var s = 150;
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);
var y = Math.cos(i * dig);
context.lineTo(dx + x * s, dy + y * s);
}
context.closePath();
context.clip();
}
function draw16(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = 'red'
//在右下角畫一個(gè)正方形
context.fillRect(250,250,150,50);
var image = new Image();
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
image.onload = function () {
//在左上角畫一幅圖片
context.drawImage(image, 0, 0,200,200);
//實(shí)驗(yàn)證明imagedata取的是canvas所在范圍畫的圖形，不止是圖片
//不會(huì)取該區(qū)域內(nèi)是空白的canvas的像素
var imagedata = context.getImageData(0, 0, 400, 300);
//修改imagedata
for (var i = 0, n = imagedata.data.length; i < n; i += 4) {
imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red;
imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; //green
imagedata.data[i + 2] = 255 - imagedata.data[i + 2]; //blue
//imagedata.data[i + 3] = 255 - imagedata.data[i + 3]; //a
}
context.putImageData(imagedata,0 ,0,100,100,300,200);
}
}
function draw17(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0,0,400,300);
context.fillStyle = "#00f";
context.font = "italic 30px sans-serif";
context.textBaseline = 'top';
//填充字符串
var txt="fill示例文字"
context.fillText(txt, 0, 0);
var length=context.measureText(txt);
context.fillText("長(zhǎng)" + length.width + "px", 0, 50);
context.font = "bolid 30px sans-serif";
txt = "stroke示例文字";
length = context.measureText(txt);
context.strokeText(txt,0,100);
context.fillText("長(zhǎng)" + length.width + "px", 0, 150);
}
function draw18(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.save(); //保存了當(dāng)前context的狀態(tài)
context.fillStyle = "black";
context.fillRect(0, 0, 100, 100);
context.restore();//恢復(fù)到剛剛保存的狀態(tài)
context.fillRect(0,120,100,100);
}
function draw19(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0,0,225)";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(255,255,0)";
context.fillRect(10, 20, 50, 50);
//把圖像保存到新的窗口
var w=window.open(canvas.toDataURL("http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"),"smallwin","width=400,height=350");
}
function draw20(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
var interal = setInterval(function () {
move(context);
}, 1);
}
var x = 100;//矩形開始坐標(biāo)
var y = 100;//矩形結(jié)束坐標(biāo)
var mx = 0;//0右1左
var my = 0; //0下1上
var ml = 1;//每次移動(dòng)長(zhǎng)度
var w = 20;//矩形寬度
var h = 20;//矩形高度
var cw = 400;//canvas寬度
var ch = 300; //canvas高度
function move(context) {
context.clearRect(0, 0, 400, 300);
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.fillStyle = "red";
context.fillRect(x, y, w, h);
if (mx == 0) {
x = x + ml;
if (x >= cw-w) {
mx = 1;
}
}
else {
x = x - ml;
if (x <= 0) {
mx = 0;
}
}
if (my == 0) {
y = y + ml;
if (y >= ch-h) {
my = 1;
}
}
else {
y = y - ml;
if (y <= 0) {
my = 0;
}
}
}
window.onload = function () {
draw21("canvas21");
draw22("canvas22");
draw23("canvas23");
draw24("canvas24");
draw25("canvas25");
draw26("canvas26");
draw27("canvas27");
draw28("canvas28");
draw0("canvas0");
draw1("canvas1");
draw2("canvas2");
draw3("canvas3");
draw4("canvas4");
draw5("canvas5");
draw6("canvas6");
draw8("canvas8");
draw7("canvas7");
draw9("canvas9");
draw10("canvas10");
draw11("canvas11");
draw12("canvas12");
draw13("canvas13");
draw14("canvas14");
draw15("canvas15");
draw16("canvas16");
draw17("canvas17");
draw18("canvas18");
draw19("canvas19");
draw20("canvas20");
}
</script>
</head>
<body>
<section><header><h2>畫矩形</h2></header><canvas id="canvas21" width="400" height="300"></canvas></section>
<section><header><h2>清除矩形</h2></header><canvas id="canvas22" width="400" height="300"></canvas></section>
<section><header><h2>繪制路徑</h2></header><canvas id="canvas23" width="400" height="300"></canvas></section>
<section><header><h2>畫圓()</h2></header><canvas id="canvas0" width="400" height="300"></canvas></section>
<section><header><h2>畫線test(lineTo moveTo)</h2></header><canvas id="canvas8" width="400" height="300"></canvas></section>
<section><header><h2>畫線demo(lineTo moveTo)</h2></header><canvas id="canvas1" width="400" height="300"></canvas></section>
<section><header><h2>貝塞爾曲線test（bezierCurveTo）</h2></header><canvas id="canvas24" width="400" height="300"></canvas></section>
<section><header><h2>貝塞爾曲線demo（bezierCurveTo）</h2></header><canvas id="canvas2" width="400" height="300"></canvas></section>
<section><header><h2>線性test（createLinearGradient addColorStop）</h2></header><canvas id="canvas25" width="400" height="300"></canvas></section>
<section><header><h2>線性demo（createLinearGradient addColorStop）</h2></header><canvas id="canvas3" width="400" height="300"></canvas></section>
<section><header><h2>發(fā)散test（createRadialGradient）</h2></header><canvas id="canvas26" width="400" height="300"></canvas></section>
<section><header><h2>發(fā)散demo（createRadialGradient）</h2></header><canvas id="canvas4" width="400" height="300"></canvas></section>
<section><header><h2>平移 test（translate）縮放（scale） 旋轉(zhuǎn)（rotate）</h2></header><canvas id="canvas5" width="400" height="300"></canvas></section>
<section><header><h2>平移 demo（translate）縮放（scale） 旋轉(zhuǎn)（rotate）</h2></header><canvas id="canvas6" width="400" height="300"></canvas></section>
<section><header><h2>坐標(biāo)與路徑的結(jié)合使用</h2></header><canvas id="canvas7" width="400" height="300"></canvas></section>
<section><header><h2>矩陣變換</h2></header><canvas id="canvas9" width="400" height="300"></canvas></section>
<section><header><h2>圖形組合疊加(globalCompositeOperation)</h2></header><canvas id="canvas10" width="400" height="300"></canvas></section>
<section><header><h2>給圖像繪制陰影test shadowOffsetX(陰影的橫向位移量) shadowOffsetY(盈盈的縱向位移量) shadowColor（陰影的顏色） shadowBlur（陰影的模糊范圍）</h2></header><canvas id="canvas27" width="400" height="300"></canvas></section>
<section><header><h2>給圖像繪制陰影demo shadowOffsetX(陰影的橫向位移量) shadowOffsetY(盈盈的縱向位移量) shadowColor（陰影的顏色） shadowBlur（陰影的模糊范圍）</h2></header><canvas id="canvas11" width="400" height="300"></canvas></section>
<section><header><h2>繪制圖像drawImage(image,x,y)</h2></header><canvas id="canvas28" width="400" height="300"></canvas></section>
<section><header><h2>繪制圖像drawImage(image,x,y,w,h)</h2></header><canvas id="canvas12" width="400" height="300"></canvas></section>
<section><header><h2>繪制局部圖像drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)</h2></header><canvas id="canvas13" width="400" height="300"></canvas></section>
<section><header><h2>圖像平鋪</h2></header><canvas id="canvas14" width="400" height="300"></canvas></section>
<section><header><h2>圖像裁剪clip</h2></header><canvas id="canvas15" width="400" height="300"></canvas></section>
<section><header><h2>像素處理getImageData</h2></header><canvas id="canvas16" width="400" height="300"></canvas></section>
<section><header><h2>繪制文字fillText strokeText</h2></header><canvas id="canvas17" width="400" height="300"></canvas></section>
<section><header><h2>繪圖狀態(tài)的保存save與恢復(fù)restore</h2></header><canvas id="canvas18" width="400" height="300"></canvas></section>
<section><header><h2>保存文件canvas.toDataURL</h2></header><canvas id="canvas19" width="400" height="300"></canvas></section>
<section><header><h2>簡(jiǎn)單動(dòng)畫</h2></header><canvas id="canvas20" width="400" height="300"></canvas></section>
</body>
</html>以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！
標(biāo)題名稱：html5canvas詳細(xì)使用教程
標(biāo)題鏈接：http://www.chinadenli.net/article20/geeijo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、服務(wù)器托管、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、App開發(fā)、ChatGPT
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 企業(yè)有必要花錢做搜索引擎優(yōu)化嗎？ 2016-11-13
- 搜索引擎優(yōu)化應(yīng)該避免這些操作！ 2014-03-07
- 長(zhǎng)尾關(guān)鍵詞優(yōu)化有哪些技巧呢? 2014-05-29
- 7種推廣地方性微信公眾號(hào)的途徑 2016-11-14
- 為什么網(wǎng)站偽靜態(tài)有利于優(yōu)化? 2013-07-29
- 分享網(wǎng)站關(guān)鍵詞優(yōu)化的成功經(jīng)驗(yàn) 2013-08-19
- 網(wǎng)站搜索引擎優(yōu)化的6大步驟！ 2014-08-15
- SEO關(guān)鍵詞優(yōu)化的四個(gè)技巧 2014-01-27
- 網(wǎng)站標(biāo)簽優(yōu)化技巧 2016-11-03
- 建設(shè)響應(yīng)式網(wǎng)站有什么優(yōu)勢(shì)呢? 2014-03-01
- 怎么使用刷流量軟件提高網(wǎng)站排名? 2013-10-07
- URL靜態(tài)化之網(wǎng)站結(jié)構(gòu)優(yōu)化基礎(chǔ)方法 2016-11-07