29

使用HTML5可以直接通过canvas标签来进行作图。
通过下面的代码,就可以在网页上绘出一张画来。
IE>=9, Chrome, Firefox等支持HTML5的浏览器才能看到。

html5

<canvas id="a" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

<script type="text/javascript">
// Set up!
var a_canvas = document.getElementById("a");
var context = a_canvas.getContext("2d");

// Draw the face
context.fillStyle = "yellow";
context.beginPath();
context.arc(95, 85, 40, 0, 2*Math.PI);
context.closePath();
context.fill();
context.lineWidth = 2;
context.stroke();
context.fillStyle = "black";

// Draw the left eye
context.beginPath();
context.arc(75, 75, 5, 0, 2*Math.PI);
context.closePath();
context.fill();

// Draw the right eye
context.beginPath();
context.arc(114, 75, 5, 0, 2*Math.PI);
context.closePath();
context.fill();

// Draw the mouth
context.beginPath();
context.arc(95, 90, 26, Math.PI, 2*Math.PI, true);
context.closePath();
context.fill();

// Write "Hello, World!"
context.font = "30px Garamond";
context.fillText("Hello, World!",15,175);
</script>




请直接用微信扫描,加入创业学研社:
wpcourse 微信

更多




请输入您的Email地址,订阅WordPress电子报:

填写您的邮件地址,订阅我们的精彩内容:

请不要在评论里发HTML格式的链接,会直接被屏蔽。

无觅相关文章插件,快速提升流量