「JavaScript/Canvas」の版間の差分
削除された内容 追加された内容
→まとめ: ln |
M s/getElementById("/querySelector("#/ |
||
11 行
<canvas id="myCanvas" width="300" height="300">HTML5のCANVAS要素に対応したウェブブラウザで御覧ください。</canvas>
<script>
const canvas = document.
context = canvas.getContext("2d");
context.strokeRect(20, 30, 150, 200);
38 行
<canvas id="canvasTest" width="300" height="300">HTML5のCANVAS要素に対応したウェブブラウザで御覧ください。</canvas>
<script>
const canvas = document.
context = canvas.getContext("2d"),
text = "こんにちは Text";
63 行
<!DOCTYPE html>
<html lang='ja'>
function init() {
let t = Date.now();
draw();
document.
function draw() {
const canvas = document.
context = canvas.getContext("2d"),
{clientWidth, clientHeight} = canvas,
rMin = -2, rMax = 2, rSpan = rMax - rMin,
iMin = -2, iMax = 2, iSpan = iMax - iMin,
nmax = 300, /* 収束判定の上限回数 */
zLimit = 4, /* 収束判定条件 */
n = 5;
let imageData = // Canvas要素から描画用ImageDataを取得
context.createImageData(clientWidth, clientHeight),
index = 0; // buffer のインデックス左上が0
for (let j = 0; j < clientHeight; j++) {
let ci = iMin + iSpan * j / (clientHeight - 1);
for (let i = 0; i < clientWidth; i++) {
const cr = rMin + rSpan * i / (clientWidth - 1);
let r = 0, im = 0;
let k = 0, z2 = 0;
for (k = 0; k < nmax; k++) {
const zr = r * r - im * im + cr,
zi = 2 * r * im + ci;
r = zr;
im = zi;
z2 = r * r + im * im;
if (z2 >= zLimit) {
break;
}
}
if (k == nmax) { /* 収束しなかった */
imageData.data[index++] = z2 * n * 4 // Red
imageData.data[index++] = z2 * n * 16 // Green
imageData.data[index++] = z2 * n * 64 // Bule
}
else { /* 収束した */
imageData.data[index++] = z2 * n * 2 // Red
imageData.data[index++] = z2 * n * 4 // Green
imageData.data[index++] = z2 * n * 8 // Bule
}
imageData.data[index++] = 255; // Alpha
}
}
context.putImageData(imageData, 0, 0);
document.
}
}
</html>
</source>
174 行
<source lang="javascript" start=61 line>
context.putImageData(imageData, 0, 0);
document.
</source>
imageDataに操作を行ったあと、putImageDataメソッドでCanvasで反映します。<br>
180 行
この事で「名前をつけて画像を保存」を実現しています。
<source lang="text">
!!!
:ruby
CANVAS_DIM, RANGE =
%html{
%head
%meta{charset: "utf-8"}/
%title JavaScriptでマンデルブロー集合を描
%meta{
%body{onload: "init()"}
%h1 JavaScriptでマンデルブロー集合を描
%canvas#canvas{height: CANVAS_DIM, width: CANVAS_DIM} Canvas対応ブラウザを使用してください。
%div{
%span#laptime
%a#link{
:javascript
function init() {
let t = Date.now();
draw();
document.
function draw() {
const canvas = document.
context = canvas.getContext("2d"),
{clientWidth, clientHeight} = canvas,
rMin = -#{RANGE}, rMax = #{RANGE}, rSpan = rMax - rMin,
iMin = -#{RANGE}, iMax = #{RANGE}, iSpan = iMax - iMin,
nmax = 300, /* 収束判定の上限回数 */
zLimit = 4, /* 収束判定条件 */
n = 5;
let imageData = // Canvas要素から描画用ImageDataを取得
242 ⟶ 243行目:
}
context.putImageData(imageData, 0, 0);
document.
}
}
</source>
===マンデルブロ集合を描画するプログラム：実行例===
[[File:マンデルブロ集合.png]]
| |||