JS : Canvas
<html><head>
<meta charset="utf-8">
<title>Canvas</title>
</head>
<body>
<canvas id='canvas' width="800" height="600">你需要最新版的瀏覽器！</canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.moveTo(49, 94);
context.lineTo(414, 191);
context.stroke();
};
</script>
</body>
</html>在 Canvas 裡面畫一條線。
畫長方形：
context.rect(x, y, width, height);
context.stroke();例：
context.rect(0, 0, 31, 31);
context.stroke();要有 stroke 才會畫出來。
Draw an Arc:
context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
context.stroke();counterclockwise 預設是 false.
例：
context.arc(200, 200, 100, 0, 1 * Math.PI);
context.stroke();Angle 0 是在三點鐘的位置。
context.beginPath();
context.arc(200, 200, 100, 0, 2 * Math.PI, false);
context.fillStyle='red';
context.fill();畫圓、填顏色。
context.rect(50, 500, 70, 70);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 10;
context.strokeStyle = 'red';
context.stroke();建議先 fill 再 stroke，這樣框線的粗細才會正確。
context.beginPath();在畫每個 shape 之前都要先打這行。 context.font = '41px Arial';
context.fillStyle = 'yellow';
context.fillText("Hi Redd", 300, 550);
context.lineWidth = 2;
context.strokeStyle = '#333333';
context.strokeText("Hi Redd", 300, 550);在畫布上打字。
var img = new Image();
img.src = 'logo.png';
img.onload = function() {
context.drawImage(img, 650, 31, 105, 52);
}加入一張圖片。
<html>
<head>
<meta charset="utf-8">
<title>Animate</title>
</head>
<body>
<canvas id='canvas' width="800" height="600">你需要最新版的瀏覽器！</canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x = 0;
var y = 0;
var size = 50;
var step = 10;
function draw() {
context.clearRect(0, 0, 800, 600);
context.beginPath();
context.rect(x, y, 100, 100);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.arc(400, 300, size, 0, 2 * Math.PI);
context.fillStyle = 'red';
context.fill();
x += 10;
if (x >= 800) {
x = -100;
}
size += step;
if (size >= 150 || size <= 50) {
step *= -1;
}
}
setInterval(draw, 50);
};
</script>
</body>
</html>動畫 <html>
<head>
<meta charset="utf-8">
<title>Collision</title>
</head>
<body>
<canvas id='canvas' width="600" height="400">你需要最新版的瀏覽器！</canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x = 0;
var y = 100;
var t = Date.now();
let speed = 300;
let dir = 1;
function draw() {
var timePassed = (Date.now() - t) / 1000;
t = Date.now();
var fps = Math.round(1 / timePassed);
context.clearRect(0, 0, 600, 400);
context.font = '25px Arial';
context.fillStyle = 'black';
context.fillText("FPS: " + fps, 20, 30);
context.beginPath();
context.rect(x, y, 100, 100);
context.fillStyle = 'green';
context.fill();
x += dir * (speed * timePassed);
if (x >= 600-100 || x <= 0) {
dir *= -1;
}
window.requestAnimationFrame(draw);
}
draw();
}
</script>
</body>
</html>Collision.
<style>
body{
background-color: #c3c3c3;
}
h1{
color: #4c6ebb;
}
#canvas {
width: 100%;
background-color: black;
}
</style>
<h1 align="center">my game</h1>
<p align="center">test</p>
<canvas id="canvas" width="600" height="400">
You need new browser.
</canvas>
<script>
window.onload = function () {
let count = 0;
var canvas = document.getElementById("canvas");
var context =canvas.getContext("2d");
var x = 300;
var y = 350;
document.onkeydown = function () {
count += 1;
y -= 25;
function draw(){
context.clearRect(0,0,600,400);
context.beginPath();
context.arc(x, y, 50, 0, 2*Math.PI);
context.fillStyle="red";
context.fill();
context.font='25px Arial';
context.fillStyle='white';
context.fillText(count,20,30);
console.log(count);
window.requestAnimationFrame(draw);
}
draw();
}
document.ontouchstart = function () {
count += 1;
y -= 25;
function draw(){
context.clearRect(0,0,600,400);
context.beginPath();
context.arc(x, y, 50, 0, 2*Math.PI);
context.fillStyle="red";
context.fill();
context.font='25px Arial';
context.fillStyle='white';
context.fillText(count,20,30);
console.log(count);
window.requestAnimationFrame(draw);
}
draw();
}
}
</script>在鍵盤按住任意鍵、或在手機螢幕觸控，讓紅球跑。
<style>
body{
background-color: #c3c3c3;
}
h1{
color: #4c6ebb;
}
#canvas {
width: 100%;
background-color: black;
}
</style>
<h1 align="center">my game</h1>
<p align="center">test</p>
<canvas id="canvas" width="600" height="400">
You need new browser.
</canvas>
<script>
window.onload = function () {
var t = Date.now();
let speed = 25;
let count = 0;
var canvas = document.getElementById("canvas");
var context =canvas.getContext("2d");
var x = 300;
var y = 350;
document.onkeydown = function () {
count += 1;
y -= 25;
function draw(){
var timePassed = (Date.now() - t) / 1000;
t = Date.now();
if(y <= 350) {
speed += 50 * timePassed;
y += speed*timePassed;
}
context.clearRect(0,0,600,400);
context.beginPath();
context.arc(x, y, 50, 0, 2*Math.PI);
context.fillStyle="red";
context.fill();
context.font='25px Arial';
context.fillStyle='white';
context.fillText(count,20,30);
console.log(count);
window.requestAnimationFrame(draw);
}
draw();
speed=25;
if(y > 350) {
count = 0
}
}
document.ontouchstart = function () {
count += 1;
y -= 25;
function draw(){
var timePassed = (Date.now() - t) / 1000;
t = Date.now();
if(y <= 350) {
speed += 50 * timePassed;
y += speed*timePassed;
}
context.clearRect(0,0,600,400);
context.beginPath();
context.arc(x, y, 50, 0, 2*Math.PI);
context.fillStyle="red";
context.fill();
context.font='25px Arial';
context.fillStyle='white';
context.fillText(count,20,30);
console.log(count);
window.requestAnimationFrame(draw);
}
draw();
speed=25;
if(y > 350) {
count = 0
}
}
}
</script>一個小互動遊戲
頁:
[1]