上の画像のようなものが作れます。
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body style="background-color:#D0D0D0;">
<div class="parent">
<div class="bg">
<canvas id="SimpleCanvas" width="640" height="640" style="background-color:#FFFFFF;"></canvas>
<canvas id="SimpleCanvas-layer2" width="120" height="120" style="background-color:rgba(255,0,0,0);;"></canvas>
<canvas id="SimpleCanvas-layerFont1" width="120" height="120" style="background-color:rgba(0,0,0,0);;"></canvas>
</div>
</div>
</body>
<link rel="stylesheet" href="./layout.css" type="text/css">
<script type="text/javascript" src="./draw.js"></script>
</html>
layout.cs
.parent {
width: 720px;
height: 0px;
position: relative; /*relativeに設定*/
padding: 0em 0em;
margin:0;
z-index: 0;
}
.l1 {
top: 20px;
left: 0px;
width: 720px;
padding: 0em 0em;
position: relative;
z-index: 2;
}
.bg {
top: 0px; /*動的に変更されるので適当*/
left: 0px; /*動的に変更されるので適当*/
width: 400px; /*撮影枠サイズ*/
height: 60px; /*撮影枠サイズ*/
position: relative; /*absoluteに設定*/
padding: 0em 0em;
z-index: 1;
}
.bg canvas {
position: absolute;
}
draw.js
function draw_1Pattern(step){
console.log(width,height,pixels.length,width*height*4)
// ピクセル単位で操作できる
var cnt = 0
for (var x = 0; x < width; ++x) {
for (var y = 0; y < height; ++y) {
var base = (y * width + x) * 4;
if((Math.floor(x/step))%2 == 0){
pixels[base + 0] = 38
pixels[base + 1] = 31
pixels[base + 2] = 135
pixels[base + 3] = 255
}
else{
pixels[base + 0] = 0
pixels[base + 1] = 133
pixels[base + 2] = 84
pixels[base + 3] = 255
}
}
}
}
var canvas = document.getElementById('SimpleCanvas');
canvas.width = screen.width*0.9
canvas.height = screen.height*0.8
var context = canvas.getContext('2d');
// キャンバス全体のピクセル情報を取得
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var width = imageData.width, height = imageData.height;
var pixels = imageData.data; // ピクセル配列：RGBA4要素で1ピクセル
//console.log(pixels)
var step = 160//ボーダーの横幅ピクセル
draw_1Pattern(step)
//console.log(pixels)
// 変更した内容をキャンバスに書き戻す
context.putImageData(imageData, 0, 0);