HTML5의 Canvas에 도트 그림 그리기
전제
HTML5의 Canvas에 도트 그림을 그리고 싶다!
제대로 된 사양이 신경이 쓰이는 사람은 W3C의 레퍼런스를 보면 좋다!
htps //w w. w3. rg/TR/2d 이렇게 xt/
그리기 위한 컨텍스트 얻기
CanvasRenderingContext2D context = canvas.getContext("2d");
CanvasRenderingContext2D context = canvas.getContext("2d");
이후의 처리를 실시하려면 , 이 문맥이 필요합니다.
인수의 "2d"는, 모르는 것 같은 것이므로 그대로 쓴다!
Canvas 채우기
context.fillStyle = style;
context.fillRect(x, y, width, height);
context.fillStyle = style;
context.fillRect(x, y, width, height);
필수는 아니지만, 만나지 않고 Canvas를 채우는데 사용한다.
이미지 데이터 만들기
ImageData image = context.createImageData(width, height);
ImageData image = context.createImageData(width, height);
이미지 데이터란?
데이터의 구조는, 배열로 좌상으로부터 우 방향으로 우하의 데이터가,
1ピクセル目の赤(0～255)、1ピクセル目の緑(0～255)、1ピクセル目の青(0～255)、1ピクセル目のアルファ値(0～255)、2ピクセル目の赤(0～255)、2ピクセル目の緑(0～255)、2ピクセル目の青(0～255)、2ピクセル目のアルファ値(0～255)、…와 너비 × 높이 × 4 (적색, 녹색, 청색, 알파 값)의 크기만큼 저장됩니다.
데이터에 쓰고 싶은 도트 그림의 정보를 설정한다.
실제 도트 그림에서, 뭔가의 수단으로 변경하는 것이 좋을 것 같아…
이미지 데이터 만들기
context.putImageData(image , x, y);
context.putImageData(image , x, y);
도트 그림의 데이터를 설정한 이미지 데이터를 Canvas에 작화한다.
작화 좌표를 설정할 수 있으므로, 애니메이션이라고도 할 수 있을 것 같다.
근거를 두고 서로 쓰지 못했습니다.
도트 그림을 표시하는 HTML<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="256" height="256"></canvas>
<script>
// 設定するドット絵はコレ！
const dotData =
"□□■□□□□□■□□" +
"□□□■□□□■□□□" +
"□□■■■■■■■□□" +
"□■■□■■■□■■□" +
"■■■■■■■■■■■" +
"■□■■■■■■■□■" +
"■□■□□□□□■□■" +
"□□□■■□■■□□□";
// キャンバスを取得する
let canvas = document.getElementById("canvas");
// 作画するためのコンテキストを取得する
let context = canvas.getContext("2d");
// キャンバスを黒く塗りつぶす
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);
// イメージデータを作成する
let imageData = context.createImageData(11, 8);
// イメージデータにドット絵のデータを設定する
let dotDataArr = dotData.split("");
for (let i = 0; i < dotDataArr.length; i++) {
switch(dotDataArr[i])
{
case "■": // ■は水色
imageData.data[i * 4 + 0] = 0; // 赤
imageData.data[i * 4 + 1] = 255; // 緑
imageData.data[i * 4 + 2] = 255; // 青
imageData.data[i * 4 + 3] = 255; // アルファ
break;
default: // それ以外は黒色
imageData.data[i * 4 + 0] = 0; // 赤
imageData.data[i * 4 + 1] = 0; // 緑
imageData.data[i * 4 + 2] = 0; // 青
imageData.data[i * 4 + 3] = 255; // アルファ
}
}
// イメージデータを作画する
context.putImageData(imageData, 15, 10); // 1匹目
context.putImageData(imageData, 40, 10); // 2匹目
context.putImageData(imageData, 65, 10); // 3匹目
context.putImageData(imageData, 90, 10); // 4匹目
</script>
</body>
</html>
브라우저에서 표시
감상
비교적 간단!
응용이 좋을 것 같지만, 재료는 없다!
Reference
이 문제에 관하여(HTML5의 Canvas에 도트 그림 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Yamazin/items/cdca50471af475e6300a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="256" height="256"></canvas>
<script>
// 設定するドット絵はコレ！
const dotData =
"□□■□□□□□■□□" +
"□□□■□□□■□□□" +
"□□■■■■■■■□□" +
"□■■□■■■□■■□" +
"■■■■■■■■■■■" +
"■□■■■■■■■□■" +
"■□■□□□□□■□■" +
"□□□■■□■■□□□";
// キャンバスを取得する
let canvas = document.getElementById("canvas");
// 作画するためのコンテキストを取得する
let context = canvas.getContext("2d");
// キャンバスを黒く塗りつぶす
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);
// イメージデータを作成する
let imageData = context.createImageData(11, 8);
// イメージデータにドット絵のデータを設定する
let dotDataArr = dotData.split("");
for (let i = 0; i < dotDataArr.length; i++) {
switch(dotDataArr[i])
{
case "■": // ■は水色
imageData.data[i * 4 + 0] = 0; // 赤
imageData.data[i * 4 + 1] = 255; // 緑
imageData.data[i * 4 + 2] = 255; // 青
imageData.data[i * 4 + 3] = 255; // アルファ
break;
default: // それ以外は黒色
imageData.data[i * 4 + 0] = 0; // 赤
imageData.data[i * 4 + 1] = 0; // 緑
imageData.data[i * 4 + 2] = 0; // 青
imageData.data[i * 4 + 3] = 255; // アルファ
}
}
// イメージデータを作画する
context.putImageData(imageData, 15, 10); // 1匹目
context.putImageData(imageData, 40, 10); // 2匹目
context.putImageData(imageData, 65, 10); // 3匹目
context.putImageData(imageData, 90, 10); // 4匹目
</script>
</body>
</html>
감상
비교적 간단!
응용이 좋을 것 같지만, 재료는 없다!
Reference
이 문제에 관하여(HTML5의 Canvas에 도트 그림 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Yamazin/items/cdca50471af475e6300a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(HTML5의 Canvas에 도트 그림 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Yamazin/items/cdca50471af475e6300a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
