canvas
描述
HTML5
实例
图形
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>表单事件</title>
<script type="text/javascript">
//直线
function line() {
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.clearRect(0,0,300,300);
ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(200,30);
ctx.closePath();
ctx.strokeStyle = "#CCCCCC";
ctx.stroke();
}
//长方形
function rectangle() {
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.clearRect(0,0,300,300);
ctx.fillStyle="#CCCCCC";
ctx.fillRect(20,20,200,100);
}
//正方形
function square() {
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.clearRect(0,0,300,300);
ctx.fillStyle="#CCCCCC";
ctx.fillRect(20,20,200,200);
}
function circle() {
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.clearRect(0,0,300,300);
ctx.fillStyle="#CCCCCC";
ctx.arc(150,150,100,0,2 * Math.PI, false);
ctx.fill();
}
</script>
</head>
<body style="text-align:center;">
<div style="margin:auto;">
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<br/>
<input type="button" value="画直线" onclick="line()"/>
<input type="button" value="画长方形" onclick="rectangle()"/>
<input type="button" value="画正方形" onclick="square()"/>
<input type="button" value="画圆形" onclick="circle()"/>
</div>
</body>
</html>
直线
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>表单事件</title>
<script type="text/javascript">
//直线
function line() {
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(200,30);
ctx.closePath();
ctx.strokeStyle = "#CCCCCC";
ctx.stroke();
}
//直线
function line2() {
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(200,30);
ctx.lineTo(200,200);
ctx.closePath();
ctx.strokeStyle = "#CCCCCC";
ctx.stroke();
}
//直线
function line3() {
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(200,200);
ctx.lineTo(30,200);
ctx.closePath();
ctx.strokeStyle = "#CCCCCC";
ctx.stroke();
}
//直线
function line4() {
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(30,200);
ctx.lineTo(30,30);
ctx.closePath();
ctx.strokeStyle = "#CCCCCC";
ctx.stroke();
}
</script>
</head>
<body style="text-align:center;">
<div style="margin:auto;">
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<br/>
<input type="button" value="画直线1" onclick="line()"/>
<input type="button" value="画直线2" onclick="line2()"/>
<input type="button" value="画直线3" onclick="line3()"/>
<input type="button" value="画直线4" onclick="line4()"/><br/>
</div>
</body>
</html>
方形
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>表单事件</title>
<script type="text/javascript">
//长方形
function rectangle() {
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.fillStyle="#11C5CC";
ctx.fillRect(20,20,100,100);
}
//长方形
function rectangle2() {
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.fillStyle="#68C9CC";
ctx.fillRect(50,50,130,130);
}
//长方形
function rectangle3() {
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.fillStyle="#C9CCCC";
ctx.fillRect(80,80,160,160);
}
//长方形
function rectangle4() {
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.fillStyle="#CCAEB0";
ctx.fillRect(110,110,190,190);
}
</script>
</head>
<body style="text-align:center;">
<div style="margin:auto;">
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<br/>
<input type="button" value="画方形1" onclick="rectangle()"/>
<input type="button" value="画方形2" onclick="rectangle2()"/>
<input type="button" value="画方形3" onclick="rectangle3()"/>
<input type="button" value="画方形4" onclick="rectangle4()"/><br/>
</div>
</body>
</html>
圆
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>表单事件</title>
<script type="text/javascript">
function circle() {
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(150,150,50,0,2 * Math.PI);
ctx.stroke();
}
function circle2() {
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(150,150,60,0,2 * Math.PI);
ctx.stroke();
}
function circle3() {
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(150,150,70,0,2 * Math.PI);
ctx.stroke();
}
function circle4() {
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(150,150,80,0,2 * Math.PI);
ctx.stroke();
}
function clear2() {
let c = document.getElementById("myCanvas");
let ctx=c.getContext("2d");
ctx.clearRect(0,0,300,300);
}
</script>
</head>
<body style="text-align:center;">
<div style="margin:auto;">
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<br/>
<input type="button" value="画圆1" onclick="circle()"/>
<input type="button" value="画圆2" onclick="circle2()"/>
<input type="button" value="画圆3" onclick="circle3()"/>
<input type="button" value="画圆4" onclick="circle4()"/>
<input type="button" value="清空" onclick="clear2()"/>
</div>
</body>
</html>