console
window.onload = function() {
var button = document.getElementById("previewButton");
button.addEventListener("click", previewHandler);
};
function drawPng(canvas, context) {
var img = new Image();
img.src = "./google_trans.jpg";
img.onload = function() {
context.drawImage(img, 20, 120, 70, 70);
};
}
function previewHandler() {
var canvas = document.getElementById("lookwhatIdrew");
var context = canvas.getContext("2d");
var selectObj = document.getElementById("shape");
var index = selectObj.selectedIndex;
var shape = selectObj[index].value;
drawBackground(canvas, context);
if (shape === "squares") {
for (var i = 0; i < 20; i++) {
drawSquare(canvas, context);
}
} else if(shape === "triangle") {
for (var i = 0; i < 20; i++) {
drawTriangle(canvas, context);
}
}
}
function drawSquare(canvas, context) {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var w = Math.random() * 15 + 5;
context.fillStyle = "lightblue";
context.fillRect(x, y, w, w);
}
function drawBackground(canvas, context) {
var colorSelector = document.getElementById("backgroundColor");
var index = colorSelector.selectedIndex;
var color = colorSelector[index].value;
context.fillStyle = color;
context.fillRect(0, 0, canvas.width, canvas.height);
}
function drawTriangle(canvas, context) {
var startx = Math.random() * canvas.width;
var starty = Math.random() * canvas.height;
context.beginPath();
context.moveTo(startx, starty);
var secondx = startx + (Math.random() - 0.5) * 40;
var secondy = starty + (Math.random() - 0.5) * 40;
context.lineTo(secondx, secondy);
var thirdx = secondx + (Math.random() - 0.5) * 40;
var thirdy = secondy + (Math.random() - 0.5) * 40;
context.lineTo(thirdx, thirdy);
context.closePath();
context.lineWidth = 2;
context.fillStyle = red;
context.stroke();
context.fill();
}
<!DOCTYPE html>
<html>
<head>
<title>Look what I drew</title>
<meta charset="utf-8">
<script type="text/javascript" src="tweetshirt.js"></script>
</head>
<body>
<h1>画布</h1>
<canvas id="lookwhatIdrew" width="600" height="200" style="border: 1px solid;display: blotck;">
Hey you, yes you, upgrade your browser!
</canvas>
<form>
<p>
<label for="backgroundColor">Select background color:</label>
<select id="backgroundColor">
<option value="white" selected="selected">White</option>
<option value="black">Black</option>
</select>
</p>
<p>
<label for="shape">Circles or squares?</label>
<select id="shape">
<option value="none">Neither</option>
<option value="circles">Circles</option>
<option value="squares">Squares</option>
<option value="triangle">Triangle</option>
</select>
</p>
<p>
<label for="foregroundColor">Select text color</label>
<select id="foregroundColor">
<option value="black" selected="selected">Black</option>
<option value="white">White</option>
</select>
</p>
<p>
<label for="tweets">Pick a tweets:</label>
<select id="tweets"></select>
</p>
<p>
<input type="button" id="previewButton" value="Preview" name="dd">
</p>
<input type="checkbox" name="tstCheckBox" id="cbox">
<label for="cbox">for checkbox</lable>
<input type="radio" name="tstradio" id="radio">
<label for="radio">for radio</label>
</form>
</body>
</html>