Posted by Altan Tanrıverdi in Aşağıdaki kod ile HTML5 ile canvas çizimi örneğini görebilirsiniz:
HTML:
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta>
-
</head>
-
<script>
-
function deg2rad(degrees) {
-
return Math.PI *degrees/180;
-
}
-
function drawString(ctx, txt, col, fh, tx, ty) {
-
var fw = fh*0.666666; var lw = fh*0.125;
-
var ls = lw/2; var xp = 0; var cr = lw;
-
ctx.lineCap = "round"; ctx.lineJoin = "round"
-
ctx.lineWidth = lw; ctx.strokeStyle = col;
-
for (var i = 0; i <txt.length; i++) {
-
drawSymbol(ctx, txt[i], ls, tx+xp, ty, fw, fh);
-
xp += (txt[i]!="."?fw+cr:(fw/2)+cr);
-
}
-
}
-
function drawSymbol(ctx, symbol, fc, cx, cy, cw, ch) {
-
ctx.beginPath();
-
switch (symbol) {
-
case "0":
-
ctx.moveTo(cx+fc,cy+(ch*0.333333));
-
ctx.arc(cx+(cw/2),cy+(cw/2),(cw/2)-fc,deg2rad(180),0, false);
-
ctx.arc(cx+(cw/2),(cy+ch)-(cw/2),(cw/2)-fc,0,deg2rad(180), false);
-
ctx.closePath();
-
break;
-
case "1":
-
ctx.moveTo(cx+(cw*0.1)+fc,cy+ch-fc);
-
ctx.lineTo(cx+cw-fc,cy+ch-fc);
-
ctx.moveTo(cx+(cw*0.666666),cy+ch-fc);
-
ctx.lineTo(cx+(cw*0.666666),cy+fc);
-
ctx.lineTo(cx+(cw*0.25),cy+(ch*0.25));
-
break;
-
case "2":
-
ctx.moveTo(cx+cw-fc,cy+(ch*0.8));
-
ctx.lineTo(cx+cw-fc,cy+ch-fc);
-
ctx.lineTo(cx+fc,cy+ch-fc);
-
ctx.arc(cx+(cw/2),cy+(cw*0.425),(cw*0.425)-fc,deg2rad(45),deg2rad(-180), true);
-
break;
-
case "3":
-
ctx.moveTo(cx+(cw*0.1)+fc,cy+fc);
-
ctx.lineTo(cx+(cw*0.9)-fc,cy+fc);
-
ctx.arc(cx+(cw/2),cy+ch-(cw*0.5),(cw*0.5)-fc,deg2rad(-90),deg2rad(180), false);
-
break;
-
case "4":
-
ctx.moveTo(cx+(cw*0.75),cy+ch-fc);
-
ctx.lineTo(cx+(cw*0.75),cy+fc);
-
ctx.moveTo(cx+cw-fc,cy+(ch*0.666666));
-
ctx.lineTo(cx+fc,cy+(ch*0.666666));
-
ctx.lineTo(cx+(cw*0.75),cy+fc);
-
ctx.moveTo(cx+cw-fc,cy+ch-fc);
-
ctx.lineTo(cx+(cw*0.5),cy+ch-fc);
-
break;
-
case "5":
-
ctx.moveTo(cx+(cw*0.9)-fc,cy+fc);
-
ctx.lineTo(cx+(cw*0.1)+fc,cy+fc);
-
ctx.lineTo(cx+(cw*0.1)+fc,cy+(ch*0.333333));
-
ctx.arc(cx+(cw/2),cy+ch-(cw*0.5),(cw*0.5)-fc,deg2rad(-80),deg2rad(180), false);
-
break;
-
case "6":
-
ctx.moveTo(cx+fc,cy+ch-(cw*0.5)-fc);
-
ctx.arc(cx+(cw/2),cy+ch-(cw*0.5),(cw*0.5)-fc,deg2rad(-180),deg2rad(180), false);
-
ctx.bezierCurveTo(cx+fc,cy+fc,cx+fc,cy+fc,cx+(cw*0.9)-fc,cy+fc);
-
ctx.moveTo(cx+(cw*0.9)-fc,cy+fc);
-
break;
-
case "7":
-
ctx.moveTo(cx+(cw*0.5),cy+ch-fc);
-
ctx.lineTo(cx+cw-fc,cy+fc);
-
ctx.lineTo(cx+(cw*0.1)+fc,cy+fc);
-
ctx.lineTo(cx+(cw*0.1)+fc,cy+(ch*0.25)-fc);
-
break;
-
case "8":
-
ctx.moveTo(cx+(cw*0.92)-fc,cy+(cw*0.59));
-
ctx.arc(cx+(cw/2),cy+(cw*0.45),(cw*0.45)-fc,deg2rad(25),deg2rad(-205), true);
-
ctx.arc(cx+(cw/2),cy+ch-(cw*0.5),(cw*0.5)-fc,deg2rad(-135),deg2rad(-45), true);
-
ctx.closePath();
-
ctx.moveTo(cx+(cw*0.79),cy+(ch*0.47));
-
ctx.lineTo(cx+(cw*0.21),cy+(ch*0.47));
-
break;
-
case "9":
-
ctx.moveTo(cx+cw-fc,cy+(cw*0.5));
-
ctx.arc(cx+(cw/2),cy+(cw*0.5),(cw*0.5)-fc,deg2rad(0),deg2rad(360), false);
-
ctx.bezierCurveTo(cx+cw-fc,cy+ch-fc,cx+cw-fc,cy+ch-fc,cx+(cw*0.1)+fc,cy+ch-fc);
-
break;
-
case "%":
-
ctx.moveTo(cx+fc,cy+(ch*0.75));
-
ctx.lineTo(cx+cw-fc,cy+(ch*0.25));
-
ctx.moveTo(cx+(cw*0.505),cy+(cw*0.3));
-
ctx.arc(cx+(cw*0.3),cy+(cw*0.3),(cw*0.3)-fc,deg2rad(0),deg2rad(360), false);
-
ctx.moveTo(cx+(cw*0.905),cy+ch-(cw*0.3));
-
ctx.arc(cx+(cw*0.7),cy+ch-(cw*0.3),(cw*0.3)-fc,deg2rad(0),deg2rad(360), false);
-
break;
-
case ".":
-
ctx.moveTo(cx+(cw*0.25),cy+ch-fc-fc);
-
ctx.arc(cx+(cw*0.25),cy+ch-fc-fc,fc,deg2rad(0),deg2rad(360), false);
-
ctx.closePath();
-
break;
-
default:
-
break;
-
}
-
ctx.stroke();
-
}
-
function setDataURL(cid) {
-
if(cid.toDataURL) {
-
var obj = document.getElementById(cid.id+"_link");
-
if(obj) {
-
obj.setAttribute("title", "resmi ac");
-
obj.setAttribute("target", "_blank");
-
obj.setAttribute("href", cid.toDataURL());
-
}
-
}
-
}
-
window.onload = function() {
-
var canvas = document.getElementById("text");
-
var ctx = canvas.getContext("2d");
-
ctx.fillStyle = "#E2EDFF";
-
ctx.fillRect(0, 0, 480, 190);
-
//drawString(context, "text", font-color, font-height, x-pos, y-pos)
-
drawString(ctx, "0123456789%.", "#000", 48, 0, 0);
-
drawString(ctx, "0123456789%.", "#000", 32, 0, 53);
-
drawString(ctx, "0123456789%.", "#000", 16, 0, 90);
-
drawString(ctx, "0123456789%.", "#000", 14, 0, 110);
-
drawString(ctx, "0123456789%.", "#000", 12, 0, 127);
-
drawString(ctx, "0123456789%.", "#000", 10, 0, 141);
-
drawString(ctx, "0123456789%.", "#000", 9, 0, 153);
-
drawString(ctx, "0123456789%.", "#000", 8, 0, 164);
-
drawString(ctx, "0123456789%.", "#000", 7, 0, 173);
-
drawString(ctx, "0123456789%.", "#000", 6, 0, 181);
-
setDataURL(canvas);
-
}
-
</script>
-
<body bgcolor="#E2EDFF">
-
<div id="ornek">
-
<a id="text_link"><canvas id="text" width="480" height="190"></canvas></a>
-
</div>
-
</body>
-
</html>
[...] Canvas ile resim yaratma; http://javam.org/html5-canvas-ile-resim-yaratma/ Posted in Array | Leave a [...]
[...] HTML5 Canvas ile resim yaratma; http://javam.org/html5-canvas-ile-resim-yaratma/ [...]