找回密碼
 立即註冊
查看: 2853|回復: 11

JS : Canvas

  [複製鏈接]

932

主題

642

回帖

3萬

積分

管理員

論壇管理員

積分
38814

最佳新人活躍會員熱心會員推廣達人宣傳達人灌水之王突出貢獻優秀版主榮譽管理論壇元老

發表於 2023-4-20 17:20:52 | 顯示全部樓層 |閱讀模式
  1. <html>
  2.         <head>
  3.                 <meta charset="utf-8">
  4.                 <title>Canvas</title>
  5.         </head>
  6.         <body>
  7.                 <canvas id='canvas' width="800" height="600">你需要最新版的瀏覽器!</canvas>
  8.                 <script type="text/javascript">
  9.                         window.onload = function() {
  10.                                 var canvas = document.getElementById('canvas');
  11.                                 var context = canvas.getContext('2d');

  12.                                 context.moveTo(49, 94);
  13.                                 context.lineTo(414, 191);
  14.                                 context.stroke();
  15.                         };
  16.                 </script>
  17.         </body>
  18. </html>
複製代碼
在 Canvas 裡面畫一條線。
[發帖際遇]: admin 樂于助人,獎勵 6 貢獻. 幸運榜 / 衰神榜

932

主題

642

回帖

3萬

積分

管理員

論壇管理員

積分
38814

最佳新人活躍會員熱心會員推廣達人宣傳達人灌水之王突出貢獻優秀版主榮譽管理論壇元老

 樓主| 發表於 2023-4-21 16:39:49 | 顯示全部樓層
畫長方形:
  1. context.rect(x, y, width, height);
  2. context.stroke();
複製代碼
例:
  1. context.rect(0, 0, 31, 31);
  2. context.stroke();
複製代碼
要有 stroke 才會畫出來。

[發帖際遇]: admin 發帖時在路邊撿到 2 金錢,偷偷放進了口袋. 幸運榜 / 衰神榜

932

主題

642

回帖

3萬

積分

管理員

論壇管理員

積分
38814

最佳新人活躍會員熱心會員推廣達人宣傳達人灌水之王突出貢獻優秀版主榮譽管理論壇元老

 樓主| 發表於 2023-4-21 16:53:58 | 顯示全部樓層
Draw an Arc:
  1. context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
  2. context.stroke();
複製代碼
counterclockwise 預設是 false.
例:
  1. context.arc(200, 200, 100, 0, 1 * Math.PI);
  2. context.stroke();
複製代碼
Angle 0 是在三點鐘的位置。
[發帖際遇]: admin 樂于助人,獎勵 3 貢獻. 幸運榜 / 衰神榜

932

主題

642

回帖

3萬

積分

管理員

論壇管理員

積分
38814

最佳新人活躍會員熱心會員推廣達人宣傳達人灌水之王突出貢獻優秀版主榮譽管理論壇元老

 樓主| 發表於 2023-4-21 17:49:54 | 顯示全部樓層
  1. context.beginPath();
  2. context.arc(200, 200, 100, 0, 2 * Math.PI, false);
  3. context.fillStyle='red';
  4. context.fill();
複製代碼
畫圓、填顏色。
[發帖際遇]: admin 樂于助人,獎勵 6 貢獻. 幸運榜 / 衰神榜

932

主題

642

回帖

3萬

積分

管理員

論壇管理員

積分
38814

最佳新人活躍會員熱心會員推廣達人宣傳達人灌水之王突出貢獻優秀版主榮譽管理論壇元老

 樓主| 發表於 2023-4-23 17:09:44 | 顯示全部樓層
  1. context.rect(50, 500, 70, 70);
  2. context.fillStyle = 'green';
  3. context.fill();
  4. context.lineWidth = 10;
  5. context.strokeStyle = 'red';
  6. context.stroke();
複製代碼
建議先 fill 再 stroke,這樣框線的粗細才會正確。
[發帖際遇]: admin 發帖時在路邊撿到 1 金錢,偷偷放進了口袋. 幸運榜 / 衰神榜

932

主題

642

回帖

3萬

積分

管理員

論壇管理員

積分
38814

最佳新人活躍會員熱心會員推廣達人宣傳達人灌水之王突出貢獻優秀版主榮譽管理論壇元老

 樓主| 發表於 2023-4-23 17:15:04 | 顯示全部樓層
  1. context.beginPath();
複製代碼
在畫每個 shape 之前都要先打這行。
[發帖際遇]: 一個袋子砸在了 admin 頭上,admin 賺了 4 金錢. 幸運榜 / 衰神榜

932

主題

642

回帖

3萬

積分

管理員

論壇管理員

積分
38814

最佳新人活躍會員熱心會員推廣達人宣傳達人灌水之王突出貢獻優秀版主榮譽管理論壇元老

 樓主| 發表於 2023-4-24 16:38:19 | 顯示全部樓層
  1. context.font = '41px Arial';
  2. context.fillStyle = 'yellow';
  3. context.fillText("Hi Redd", 300, 550);
  4. context.lineWidth = 2;
  5. context.strokeStyle = '#333333';
  6. context.strokeText("Hi Redd", 300, 550);
複製代碼
在畫布上打字。

[發帖際遇]: admin 發帖時在路邊撿到 4 金錢,偷偷放進了口袋. 幸運榜 / 衰神榜

932

主題

642

回帖

3萬

積分

管理員

論壇管理員

積分
38814

最佳新人活躍會員熱心會員推廣達人宣傳達人灌水之王突出貢獻優秀版主榮譽管理論壇元老

 樓主| 發表於 2023-4-25 17:41:49 | 顯示全部樓層
  1. var img = new Image();
  2. img.src = 'logo.png';
  3. img.onload = function() {
  4. context.drawImage(img, 650, 31, 105, 52);
  5. }
複製代碼
加入一張圖片。
[發帖際遇]: admin 發帖時在路邊撿到 5 金錢,偷偷放進了口袋. 幸運榜 / 衰神榜

932

主題

642

回帖

3萬

積分

管理員

論壇管理員

積分
38814

最佳新人活躍會員熱心會員推廣達人宣傳達人灌水之王突出貢獻優秀版主榮譽管理論壇元老

 樓主| 發表於 2023-4-26 17:35:27 | 顯示全部樓層
  1. <html>
  2.         <head>
  3.                 <meta charset="utf-8">
  4.                 <title>Animate</title>
  5.         </head>
  6.         <body>
  7.                 <canvas id='canvas' width="800" height="600">你需要最新版的瀏覽器!</canvas>
  8.                 <script type="text/javascript">
  9.                         window.onload = function() {
  10.                                 var canvas = document.getElementById('canvas');
  11.                                 var context = canvas.getContext('2d');
  12.                                 var x = 0;
  13.                                 var y = 0;
  14.                                 var size = 50;
  15.                                 var step = 10;

  16.                                 function draw() {
  17.                                         context.clearRect(0, 0, 800, 600);

  18.                                         context.beginPath();
  19.                                         context.rect(x, y, 100, 100);
  20.                                         context.fillStyle = 'green';
  21.                                         context.fill();

  22.                                         context.beginPath();
  23.                                         context.arc(400, 300, size, 0, 2 * Math.PI);
  24.                                         context.fillStyle = 'red';
  25.                                         context.fill();

  26.                                         x += 10;
  27.                                         if (x >= 800) {
  28.                                                 x = -100;
  29.                                         }

  30.                                         size += step;
  31.                                         if (size >= 150 || size <= 50) {
  32.                                                 step *= -1;
  33.                                         }
  34.                                 }

  35.                                 setInterval(draw, 50);
  36.                         };
  37.                 </script>
  38.         </body>
  39. </html>
複製代碼
動畫
[發帖際遇]: 一個袋子砸在了 admin 頭上,admin 賺了 4 金錢. 幸運榜 / 衰神榜

932

主題

642

回帖

3萬

積分

管理員

論壇管理員

積分
38814

最佳新人活躍會員熱心會員推廣達人宣傳達人灌水之王突出貢獻優秀版主榮譽管理論壇元老

 樓主| 發表於 2023-5-4 18:25:34 | 顯示全部樓層
  1. <html>
  2.         <head>
  3.                 <meta charset="utf-8">
  4.                 <title>Collision</title>
  5.         </head>
  6.         <body>
  7.                 <canvas id='canvas' width="600" height="400">你需要最新版的瀏覽器!</canvas>
  8.                 <script type="text/javascript">
  9.                         window.onload = function() {
  10.                                 var canvas = document.getElementById('canvas');
  11.                                 var context = canvas.getContext('2d');
  12.                                 var x = 0;
  13.                                 var y = 100;

  14.                                 var t = Date.now();
  15.                                 let speed = 300;
  16.                                 let dir = 1;

  17.                                 function draw() {
  18.                                         var timePassed = (Date.now() - t) / 1000;
  19.                                         t = Date.now();
  20.                                         var fps = Math.round(1 / timePassed);

  21.                                         context.clearRect(0, 0, 600, 400);

  22.                                         context.font = '25px Arial';
  23.                                         context.fillStyle = 'black';
  24.                                         context.fillText("FPS: " + fps, 20, 30);

  25.                                         context.beginPath();
  26.                                         context.rect(x, y, 100, 100);
  27.                                         context.fillStyle = 'green';
  28.                                         context.fill();

  29.                                         x += dir * (speed * timePassed);
  30.                                         if (x >= 600-100 || x <= 0) {
  31.                                                 dir *= -1;
  32.                                         }

  33.                                         window.requestAnimationFrame(draw);
  34.                                 }

  35.                                 draw();
  36.                         }
  37.                 </script>
  38.         </body>
  39. </html>
複製代碼
Collision.
[發帖際遇]: 一個袋子砸在了 admin 頭上,admin 賺了 1 金錢. 幸運榜 / 衰神榜

932

主題

642

回帖

3萬

積分

管理員

論壇管理員

積分
38814

最佳新人活躍會員熱心會員推廣達人宣傳達人灌水之王突出貢獻優秀版主榮譽管理論壇元老

 樓主| 發表於 2023-7-21 16:16:52 | 顯示全部樓層
  1. <style>
  2. body{
  3.         background-color: #c3c3c3;
  4. }
  5. h1{
  6.         color: #4c6ebb;
  7. }
  8. #canvas {
  9.         width: 100%;
  10.         background-color: black;
  11. }
  12. </style>
  13. <h1 align="center">my game</h1>
  14. <p align="center">test</p>

  15. <canvas id="canvas" width="600" height="400">
  16. You need new browser.
  17. </canvas>

  18. <script>
  19. window.onload = function () {
  20.         let count = 0;
  21.         var canvas = document.getElementById("canvas");
  22. var context =canvas.getContext("2d");
  23. var x = 300;
  24. var y = 350;
  25.         document.onkeydown = function () {
  26.                 count += 1;
  27.                 y -= 25;
  28.                 function draw(){
  29.                 context.clearRect(0,0,600,400);
  30.                 context.beginPath();
  31.                 context.arc(x, y, 50, 0, 2*Math.PI);
  32.                 context.fillStyle="red";
  33.                 context.fill();
  34.                
  35.                 context.font='25px Arial';
  36.                 context.fillStyle='white';
  37.                 context.fillText(count,20,30);
  38.                 console.log(count);
  39.                 window.requestAnimationFrame(draw);
  40.                 }
  41.                 draw();
  42.         }
  43.        
  44.         document.ontouchstart = function () {
  45.                 count += 1;
  46.                 y -= 25;
  47.                 function draw(){
  48.                 context.clearRect(0,0,600,400);
  49.                 context.beginPath();
  50.                 context.arc(x, y, 50, 0, 2*Math.PI);
  51.                 context.fillStyle="red";
  52.                 context.fill();
  53.                
  54.                 context.font='25px Arial';
  55.                 context.fillStyle='white';
  56.                 context.fillText(count,20,30);
  57.                 console.log(count);
  58.                 window.requestAnimationFrame(draw);
  59.                 }
  60.                 draw();
  61.         }

  62. }
  63. </script>
複製代碼
在鍵盤按住任意鍵、或在手機螢幕觸控,讓紅球跑。
[發帖際遇]: admin 樂于助人,獎勵 4 貢獻. 幸運榜 / 衰神榜

932

主題

642

回帖

3萬

積分

管理員

論壇管理員

積分
38814

最佳新人活躍會員熱心會員推廣達人宣傳達人灌水之王突出貢獻優秀版主榮譽管理論壇元老

 樓主| 發表於 2023-7-24 18:26:27 | 顯示全部樓層
  1. <style>
  2. body{
  3.         background-color: #c3c3c3;
  4. }
  5. h1{
  6.         color: #4c6ebb;
  7. }
  8. #canvas {
  9.         width: 100%;
  10.         background-color: black;
  11. }
  12. </style>
  13. <h1 align="center">my game</h1>
  14. <p align="center">test</p>

  15. <canvas id="canvas" width="600" height="400">
  16. You need new browser.
  17. </canvas>

  18. <script>
  19. window.onload = function () {
  20.         var t = Date.now();
  21.         let speed = 25;
  22.         let count = 0;
  23.         var canvas = document.getElementById("canvas");
  24. var context =canvas.getContext("2d");
  25. var x = 300;
  26. var y = 350;
  27.         document.onkeydown = function () {
  28.                 count += 1;
  29.                 y -= 25;
  30.                 function draw(){
  31.                 var timePassed = (Date.now() - t) / 1000;
  32.                 t = Date.now();
  33.                 if(y <= 350) {
  34.                           speed += 50 * timePassed;
  35.                           y += speed*timePassed;
  36.                 }
  37.                 context.clearRect(0,0,600,400);
  38.                 context.beginPath();
  39.                 context.arc(x, y, 50, 0, 2*Math.PI);
  40.                 context.fillStyle="red";
  41.                 context.fill();
  42.                
  43.                 context.font='25px Arial';
  44.                 context.fillStyle='white';
  45.                 context.fillText(count,20,30);
  46.                 console.log(count);
  47.                 window.requestAnimationFrame(draw);
  48.                 }
  49.                 draw();
  50.                 speed=25;
  51.                 if(y > 350) {
  52.                           count = 0
  53.                 }
  54.         }
  55.        
  56.         document.ontouchstart = function () {
  57.                 count += 1;
  58.                 y -= 25;
  59.                 function draw(){
  60.                 var timePassed = (Date.now() - t) / 1000;
  61.                 t = Date.now();
  62.                 if(y <= 350) {
  63.                           speed += 50 * timePassed;
  64.                           y += speed*timePassed;
  65.                 }
  66.                 context.clearRect(0,0,600,400);
  67.                 context.beginPath();
  68.                 context.arc(x, y, 50, 0, 2*Math.PI);
  69.                 context.fillStyle="red";
  70.                 context.fill();
  71.                
  72.                 context.font='25px Arial';
  73.                 context.fillStyle='white';
  74.                 context.fillText(count,20,30);
  75.                 console.log(count);
  76.                 window.requestAnimationFrame(draw);
  77.                 }
  78.                 draw();
  79.                 speed=25;
  80.                 if(y > 350) {
  81.                           count = 0
  82.                 }
  83.         }

  84. }
  85. </script>
複製代碼
一個小互動遊戲
[發帖際遇]: admin 發帖時在路邊撿到 2 金錢,偷偷放進了口袋. 幸運榜 / 衰神榜
您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

Archiver|手機版|小黑屋|DD論壇 維護: Redd Design

GMT+8, 2024-7-22 22:44 , Processed in 0.062682 second(s), 34 queries , Gzip On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回復 返回頂部 返回列表