Harigami
タイトルなし
No License
HTML
コピー
<!DOCTYPE html>
<html style="width:1024px; margin:0px;">
<head>
<meta charset="UTF-8">
<style type="text/css">
</style>
<script type="text/javascript">
<!--
const colorEFSF = "rgba( 19, 146, 244,1.0)";
const colorZION = "rgba(255, 48, 0,1.0)";
const startX = 75;
const startY = 75;
const endX = 75;
const endY = 75;
var testColor = colorEFSF;
function chipDraw(canvas) {
var context = canvas.getContext('2d');
context.fillStyle = testColor;
context.strokeStyle = "#000000";
context.lineWidth = 0.25;
var radius = 4;
for ( var i = 0; i < 51; i++ ) {
var randomX = Math.floor( Math.random() * (canvas.width - startX - endX ) );
var randomY = Math.floor( Math.random() * (canvas.height - startY - endY ) );
context.beginPath();
context.arc(randomX + startX , randomY + startY , radius, 0, 2 * Math.PI, false);
context.fill();
context.stroke();
}
context.translate(150, 95 );
context.scale(0.345,0.275);
context.lineWidth = 2;
context.beginPath();
context.moveTo( 10, 0);
context.lineTo( 53, 0);
context.lineTo( 57, 32);
context.lineTo( 63, 32);
context.lineTo( 63, 63);
context.lineTo( 0, 63);
context.lineTo( 0, 32);
context.lineTo( 6, 32);
context.closePath();
context.fill();
context.stroke();
context.fillStyle = "#000000";
context.font = "70px arial bold";
context.fillText("Ａ", -3, 57);
context.fillText("Ａ", -4, 53);
context.fillText("Ａ", -2, 53);
context.fillText("Ａ", -1, 53);
context.fillStyle = "#FFFFFF";
context.font = "64px arial";
context.fillText("Ａ", 0, 55);
}
function draw(canvas,imagePath){
console.log("draw");
const image = new Image();
image.addEventListener("load",function (){
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
console.log("load!");
chipDraw(canvas);
});
image.src = imagePath;
}
function sample() {
//描画コンテキストの取得
var canvas = document.getElementById('colortest');
if (canvas.getContext) {
let imagePath = "http://msgo.bandainamco-ol.jp/member/concept/map/images/001/sentence1_image2.jpg";
//let imagePath = "http://mmoloda-msgo.x0.com/image/71830.png";
draw(canvas,imagePath);
}
}
//-->
</script>
</head>
<body onLoad="sample()">
<canvas id="colortest">図形を表示するには、canvasタグをサポートしたブラウザが必要です。</canvas>
</body>
</html>
現在、コメントはありません。
他の人よりも先にコメントしましょう。
他の人よりも先にコメントしましょう。