HTML5的绘画支持（三）-优快云博客

本文介绍如何使用HTML5的Canvas API进行基本的图形绘制，包括矩形填充与描边、文字填充与描边等操作。通过实例展示了不同样式设置对图形显示效果的影响。

绘图:绘制几何图形

<html>
<body>
<h2>画图入门</h2>
<canvas id="mc" width="300" height="280" style="border:1px solid black"></canvas>
<script>
var canvas=document.getElementById("mc");
var ctx=canvas.getContext("2d");
ctx.fillRect(30,20,120,60);
ctx.fillStyle="#ff0";
ctx.fillRect(80,60,120,60);
ctx.strokeStyle="#00f";
ctx.lineWidth=10;
ctx.strokeRect(30,130,120,60);
ctx.strokeStyle="#0ff";
ctx.lineJoin="round";
ctx.strokeRect(80,160,120,60);
ctx.strokeStyle="#f0f";
ctx.lineJoin="bevel";
ctx.strokeRect(130,190,120,60);
</script>
</body>
</html>

绘图:绘制字符串

<html>
<body>
<h2>画图入门</h2>
<canvas id="mc" width="400" height="180" style="border:1px solid black"></canvas>
<script>
var canvas=document.getElementById("mc");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#ff0";
ctx.font="italic 50px 隶书";
ctx.textBaseline="top";
ctx.fillText("Canvas绘图学习",0,0);
ctx.strokeStyle="#f0f";
ctx.font="bold 45px 宋体";
ctx.strokeText("测试测试",0,50);
</script>
</body>
</html>