HTML5 Canvas上製作幾個筆刷的作業

最近上課要交作業, 我終於寫完了: )

完整code如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Canvas Draw homework</title>
<style>
h3, select, button {
display: inline-block;
vertical-align: middle;
}
canvas {
display: block;
}
</style>
</head>
<body>
<h3>Canvas Draw</h3>
<select name="" id="" onchange= "hi(this)">
<option value="">請選要畫哪一個哦</option>
<option value="value1">流星錘</option>
<option value="value2">方塊</option>
<option value="value3">笑臉</option>
</select>
<button type="reset" onclick="clearCanvas();">重設</button>
<canvas id="cvs" width="800" height="600" style="border: 1px solid black"></canvas>

<script>
var ctx;
window.onload = function() {
ctx = document.getElementById("cvs").getContext("2d");
};

function hi(sel) {
ctx.canvas.removeEventListener("mousedown", openCvs);
ctx.canvas.removeEventListener("mousedown", openCvs1);
ctx.canvas.removeEventListener("mousedown", openCvs2);

if (sel.value == "value1") {
ctx.canvas.addEventListener("mousedown", openCvs);
ctx.canvas.addEventListener("mouseup", closeCvs);
} else if(sel.value == "value2") {
ctx.canvas.addEventListener("mousedown", openCvs1);
ctx.canvas.addEventListener("mouseup", closeCvs1);
} else if (sel.value == "value3") {
ctx.canvas.addEventListener("mousedown", openCvs2);
ctx.canvas.addEventListener("mouseup", closeCvs2);
}
}
function clickCvs(e) {
var x = e.clientX - ctx.canvas.offsetLeft;
var y = e.clientY - ctx.canvas.offsetTop;
var size = Math.random() * 40 + 10;
drawStar(x, y, size);
}
function clickCvs1(e) {
var x = e.clientX - ctx.canvas.offsetLeft;
var y = e.clientY - ctx.canvas.offsetTop;
var size = Math.random() * 40 + 10;
drawRect(x, y, size);
}
function clickCvs2(e) {
var x = e.clientX - ctx.canvas.offsetLeft-75;
var y = e.clientY - ctx.canvas.offsetTop-75;
drawSmile(x, y);
}

function drawStar(x, y, size) {
ctx.save();
ctx.translate(x, y);
ctx.fillStyle = "#0072E3";
ctx.fillRect(-size/2, -size/2, size, size);
ctx.rotate(Math.PI/4);
ctx.fillRect(-size/2, -size/2, size, size);
ctx.restore();
}
function drawRect(x, y, size) {
ctx.save();
var gra = ctx.createLinearGradient(100, 400, 600, 100);
gra.addColorStop(0, "#C48888");
gra.addColorStop(0.3, "#fff");
gra.addColorStop(1, "#BE77FF");
ctx.fillStyle = gra;
ctx.translate(x, y);
ctx.fillRect(-size/2, -size/2, size, size);
ctx.restore();
}
function drawSmile(x, y) {
ctx.save();
ctx.translate(x, y);
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true);
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true);
ctx.strokeStyle="#6DD0CD";
ctx.stroke();
ctx.restore();
}

function closeCvs() {
ctx.canvas.removeEventListener("mousemove", clickCvs);
}
function closeCvs1() {
ctx.canvas.removeEventListener("mousemove", clickCvs1);
}
function closeCvs2() {
ctx.canvas.removeEventListener("mousemove", clickCvs2);
}

function openCvs() {
ctx.canvas.addEventListener("mousemove", clickCvs);
}
function openCvs1() {
ctx.canvas.addEventListener("mousemove", clickCvs1);
}
function openCvs2() {
ctx.canvas.addEventListener("mousemove", clickCvs2);
}

function clearCanvas() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
</script>

</body>
</html>



留言

張貼留言

熱門文章