[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
プログラミング、3DCGとその他いろいろについて
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
<canvas id="drawTextCanvas" width="300" height="200"></canvas><br /> <script> (function() { var canvas = document.getElementById("drawTextCanvas"); var context = canvas.getContext("2d"); context.fillText("Hello world!", 20, 30); })(); </script>
<canvas id="drawFontChangedTextCanvas" width="300" height="200"></canvas><br /> <script> (function() { var canvas = document.getElementById("drawFontChangedTextCanvas"); var context = canvas.getContext("2d"); context.font = "30px Arial"; context.fillText("Hello world!", 20, 30); })(); </script>
<canvas id="drawMeasuredTextCanvas" width="300" height="200"></canvas><br /> <script> (function() { var canvas = document.getElementById("drawMeasuredTextCanvas"); var context = canvas.getContext("2d"); context.font = "30px Arial"; var text = "Hello World!"; var size = context.measureText(text); context.fillRect(0, 0, size.width, 30); context.fillStyle = "rgb(0, 255, 255)"; context.fillText(text, 0, 30); })(); </script>
<canvas id="drawImageCanvas" width="300" height="200"></canvas> <script> (function() { var canvas = document.getElementById("drawImageCanvas"); var context = canvas.getContext("2d"); var image = new Image(); image.onload = function () { context.drawImage(image, 30, 20); }; image.src = "https://blog.cnobi.jp/v1/blog/user/118c300f2ee0ad311e5962b0167205f5/1439584363"; })(); </script>
<canvas id="drawShadowCanvas" width="300" height="200"></canvas> <script> (function() { var canvas = document.getElementById("drawShadowCanvas"); var context = canvas.getContext("2d"); context.shadowOffsetX = 20; context.shadowOffsetY = 10; context.shadowColor = "rgb(0, 0, 0)"; context.fillStyle = "rgb(0, 0, 255)"; context.fillRect(30, 30, 200, 100); })(); </script>
<canvas id="drawBlurredShadowCanvas" width="300" height="200"></canvas> <script> (function() { var canvas = document.getElementById("drawBlurredShadowCanvas"); var context = canvas.getContext("2d"); context.shadowOffsetX = 20; context.shadowOffsetY = 10; context.shadowColor = "rgb(0, 0, 0)"; context.shadowBlur = 5; context.fillStyle = "rgb(0, 0, 255)"; context.fillRect(30, 30, 200, 100); })(); </script>
<canvas id="drawArcCanvas" width="300" height="200"></canvas> <script> (function() { var canvas = document.getElementById("drawArcCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.arc(100, 100, 100, 0, Math.PI, false); context.stroke(); })(); </script>
<canvas id="drawCircleCanvas" width="300" height="200"></canvas> <script> (function () { var canvas = document.getElementById("drawCircleCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.arc(100, 100, 100, 0, Math.PI * 2, false); context.stroke(); })(); </script>
<canvas id="drawFilledTriangleCanvas" width="300" height="200"></canvas> <script> (function() { var canvas = document.getElementById("drawFilledTriangleCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(150, 0); context.lineTo(300, 200); context.lineTo(0, 200); context.lineTo(150, 0); context.fill(); })(); </script>