JS : Canvas

admin · 發表於 2023-4-20 17:20:52

<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 裡面畫一條線。

admin · 發表於 2023-4-21 16:39:49

畫長方形：

context.rect(x, y, width, height);
context.stroke();

複製代碼

例：

context.rect(0, 0, 31, 31);
context.stroke();

複製代碼

要有 stroke 才會畫出來。

admin · 發表於 2023-4-21 16:53:58

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 是在三點鐘的位置。

admin · 發表於 2023-4-21 17:49:54

context.beginPath();
context.arc(200, 200, 100, 0, 2 * Math.PI, false);
context.fillStyle='red';
context.fill();

複製代碼

畫圓、填顏色。

admin · 發表於 2023-4-23 17:09:44

context.rect(50, 500, 70, 70);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 10;
context.strokeStyle = 'red';
context.stroke();

複製代碼

建議先 fill 再 stroke，這樣框線的粗細才會正確。

admin · 發表於 2023-4-23 17:15:04

context.beginPath();

複製代碼

在畫每個 shape 之前都要先打這行。

admin · 發表於 2023-4-24 16:38:19

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);

複製代碼

在畫布上打字。

admin · 發表於 2023-4-25 17:41:49

var img = new Image();
img.src = 'logo.png';
img.onload = function() {
context.drawImage(img, 650, 31, 105, 52);
}

複製代碼

加入一張圖片。

admin · 發表於 2023-4-26 17:35:27

<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>

複製代碼

動畫

admin · 發表於 2023-5-4 18:25:34

<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.

admin · 發表於 2023-7-21 16:16:52

<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>

複製代碼

在鍵盤按住任意鍵、或在手機螢幕觸控，讓紅球跑。

admin · 發表於 2023-7-24 18:26:27

<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>

複製代碼

一個小互動遊戲

		自動登錄	找回密碼
密碼			立即註冊

JS : Canvas

相關帖子

最佳新人

活躍會員

熱心會員

推廣達人

宣傳達人

灌水之王

突出貢獻

優秀版主

榮譽管理

論壇元老