<!DOCTYPE html>
<html>
<head >
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.zt {
width: 600px;
height: 600px;
border: solid 4px rgba(0, 0, 0, 0.67);
margin-left: 300px;
}
#canvas {
border-top: solid 1px #000000;
margin-top: 60px;
}
h1 {
margin-left: 500px;
}
input {
margin-left: 30px;
margin-top: 60px;
width: 62px;
height: 30px;
font-size: 14px;
color: white;
}
#qianbi{
background-color: #fff318;
}
#zhixian{
background-color: #ffa558;
}
#juxing{
background-color: #e23cc1;
}
#yuanjiao{
background-color: #4434e2;
}
#yuan{
background-color: #2ce24b;
}
#color{
background-color: #fc041c;
}
</style>
</head>
<body>
<h1>簡易畫圖闆</h1><br/>
<div class="zt">
<div id="an">
<input type="button" id="qianbi" value="鉛筆" />
<input type="button" id="zhixian" value="直線" />
<input type="button" id="juxing" value="矩形" />
<input type="button" id="yuanjiao" value="圓角矩形" />
<input type="button" id="yuan" value="圓" />
<input type="color" id="color" value="顔色"/>
</div>
<canvas id="canvas" width="600" height="550">
你的浏覽器不支援canvas标簽,請使用firefox和chrome浏覽器
</canvas>
</div>
<script type="text/javascript">
var x1;
var y1;
var x2;
var y2;
var index = 0;
var kg = false;
// var ys=document.getElementById("color")
// console.log("ys");
var cv = document.getElementById("canvas");
var zx = cv.getContext("2d");
//擷取上面div的INPUT
var anniu = document.getElementById("an").getElementsByTagName("input");
for (var i = 0; i < anniu.length; i++) {
anniu[i].index = i;
anniu[i].onclick = function () {
index = this.index;
console.log(index);
}
}
cv.onmousedown = function (event) {
var e = event || window.event;
x1 = e.offsetX;
y1 = e.offsetY;
console.log("x1=" + x1 + " y=" + y1);
if (index == 0) {
kg = true;
cv.onmousemove = function (event) {
if (kg == true) {
var e = event || window.event;
var x3 = e.offsetX;
var y3 = e.offsetY;
zhixian(x1, y1, x3, y3);
x1 = x3;
y1 = y3;
}
}
};
};
cv.onmouseup = function (event) {
var e = event || window.event;
x2 = e.offsetX;
y2 = e.offsetY;
console.log("x2=" + x2 + " y2=" + y2);
kg = false;
if (index == 1) {
zhixian(x1, y1, x2, y2);
} else if (index == 2) {
juxing(x1, y1, x2, y2);
} else if (index == 3) {
yuanjiao(x1, y1, x2 - x1, y2 - y1);
}else if(index ==4){
yuan(x1, y1, x2 - x1, y2 - y1);
}
};
cv.onmouseout = function () {
kg = false;
};
//畫直線
function zhixian(x1, y1, x2, y2) {
zx.beginPath();
zx.moveTo(x1, y1);
zx.lineTo(x2, y2);
zx.stroke();
}
// 畫矩形
function juxing(x1, y1, x2, y2) {
zx.rect(x1, y1, x2 - x1, y2 - y1);
zx.stroke();
}
// 圓角矩形
function yuanjiao(x, y, w, h) {
}
//畫圓
function yuan(x1, y1, x2, y2){
zx.beginPath();
var r=(x1-x2)/2
console.log(r,x2,x1);
zx.arc(x1,y1,r,0,2*Math.PI);
zx.closePath();
zx.stroke();
}
</script>
</body>
</html>
效果圖如下。矩形效果未實作
簡易畫圖闆
你的浏覽器不支援canvas标簽,請使用firefox和chrome浏覽器
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)