Html5 之Canvas [画布]
编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 填充
function bbs() {
let canvas = document.getElementById('canvas');
let canvastxt=canvas.getContext('2d');
canvastxt.fillStyle="#ffff00";
canvastxt.fillRect(0,0,123,645);
}
// 填充画线
function bbs1() {
let canvas = document.getElementById('canvas');
let ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.closePath();
ctx.stroke();
}
// 画圆
function bbs2(){
let canvas = document.getElementById('canvas');
let ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.arc(295,100,40,0,2*Math.PI);
ctx.closePath();
ctx.stroke();
// ctx.save();
}
// 绘制文本
function bbs3(){
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.font = '30px Vladimir Script';
ctx.fillText("hello word",50,100);
}
function bbs4(){
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.font = '50px Segoe Script ';
ctx.strokeText("hello word",150,200);
}
//渐变
function bbs5(){
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let grd=ctx.createLinearGradient(0,0,550,600);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,600,675)
}
function bbs6(){
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let grd=ctx.createLinearGradient(175,50,5,190,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(100,10,250,180)
}
// 图像画布
function bbs7(){
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
}
// 清除
function bbs8(){
//方法1
// let canvas=document.getElementById("canvas").innerHTML=' ';
//方法2
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 800, 400);
// let canvas = document.getElementById("canvas");
// let ctx = canvas.getContext("2d");
// ctx.height = ctx.height;
// ctx.clearRect(canvas.width,canvas.height);
// obj.innerHTML='';
}
//保存
function bbs9(){
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let a =document.createElement('a');
a.href=canvas.toDataURL();
a.download="save";
a.click();
// canvas.width=imgWidth;
// canvas.height=imgHeight;
// ctx.drawImage(img,0,0,imgWidth,imgHeight);
// dataUrl=canvas.toDataURL(type);
// console.log(dataUrl);
// callback && callback(dataUrl)
// return dataUrl;
// let a=document.captureEvents("a");
}
</script>
<h1>小向同学</h1>
<canvas id="canvas" width="800" height="400" style="border:1px solid #000000"></canvas>
<img id="scream" src="img/img2.jpg" alt="the quick" width="72" height="72"></img>
<br>
<button id="btn" onclick="bbs()">填充</button>
<button id="btn1" onclick="bbs1()">填充画线</button>
<button id="btn2" onclick="bbs2()">画圆</button>
<button id="btn3" onclick="bbs3()">绘制文本-实心</button>
<button id="btn4" onclick="bbs4()">绘制文本-空心</button>
<button id="btn5" onclick="bbs5()">线性渐变</button>
<button id="btn6" onclick="bbs6()">圆形渐变</button>
<button id="btn7" onclick="bbs7()">图像画布</button>
<button id="btn8" onclick="bbs8()">清除</button>
<button id="btn9" onclick="bbs9()">保存</button>
</body>
</html>
运行结果
