值得一提的是， arc() 方法中第四和第五个参数使用的都是弧度值，不过我们一般喜欢使用角度，比如 360 度，而不是 2 PI，所以我们可以写一个转换函数，然后你就可以尽情的使用熟悉的角度值了。

function degreesToRadians(degrees) { return (degrees * Math.PI) / 180; }

下面，你就可以画出下面这样的效果。

图形已经绘制完毕了，我们就去看看如何绘制文字，首先我们的获取输入控件中输入的文字，然后我们需要使用 context 的 measureText() 测量文字的宽度，因为我们想让文字居中。

function drawText(canvas, context) { var selectObj = document.getElementById("foregroundColor"); var index = selectObj.selectedIndex; var fgColor = selectObj[index].value; var fontSize = "24"; context.fillStyle = fgColor; context.font = "bold " + fontSize + "px sans-serif"; context.textAlign = "left"; var message = document.getElementById("message").value; var messageWidth = context.measureText(message).width; var x = Math.floor(canvas.width / 2 - messageWidth / 2); var y = Math.floor(canvas.height / 2 - fontSize / 2); context.fillText(message, x, y); }

可以使用 context.font 设置文字相关的信息，第一个参数是 font style ， 可以设置为 bold 或者 italic ，第二个参数是文字的大小，第三个参数是 font family ，这里我指定为 sans-serif 。

你可能还有疑问的是， context.textAlign 是什么玩意？这个就是设置 fillText() 中 x 坐标指定的是文本哪个部位的坐标，如果你设置为 center ，那么这个 x 就是文本中间的 x 坐标。当然我们这里设置为 left 就是文本最左边的 x 坐标。

那么问题来了，我们为什么还要使用 measureText() 这么费劲的测试文本的宽度使文本居中呢？的确如此，我们可以使用 textAlign 轻易的实现文本居中，下面是对上述函数的改写。

function drawText(canvas, context) { var selectObj = document.getElementById("foregroundColor"); var index = selectObj.selectedIndex; var fgColor = selectObj[index].value; var fontSize = "24"; context.fillStyle = fgColor; context.font = "bold " + fontSize + "px sans-serif"; context.textAlign = "center"; // change var x = Math.floor(canvas.width / 2); // change var y = Math.floor(canvas.height / 2 - fontSize / 2); var message = document.getElementById("message").value; context.fillText(message, x, y); }

文字也绘制完毕了，下面就绘制图形右下角的笑脸图片，当然这是个图片，不是一笔一笔画出来的。

function drawImage(canvas, context) { var smileImage = new Image(); smileImage.src = "smile.png"; smileImage.onload = function() { context.drawImage(smileImage, 632, 272, 24, 24); } }

drawImage() 的第二个参数是图形的左上角的 x 坐标，第三个参数是左上角的 y 坐标，第四个参数是图形的宽度，第五个参数是图形的高度。

这里为什么还是用一个 onload 呢？因为图片总是需要加载的，如果图片还没有加载完毕，就开始去绘制图片，肯定会绘制失败，所以我们利用一个回调，当图片加载完毕，再去绘制图片。

最后再来介绍一个目前浏览器支持不是很好的属性，我们可以将这个 Canvas 转化为一个图片，怎么样？听上去是不是很心动，其实写起来很容易。

function makeImage() { var canvas = document.getElementById("myCanvas"); canvas.onclick = function() { window.location = canvas.toDataURL("image/png"); } }

这个时候，如果你的浏览器支持的话，只要你点击一些画布，那么就会有一个图片版本弹出来，供你保存到本地。

我在我的电脑上做了测试，只有 Firefox 支持这个功能，我喜欢的 Google Chrome, Opera, Yandex 在这方面的支持还不尽如人意。

如果你想要项目的源码，你可以到 我的 Github 下载源码。

分享给小伙伴们：

本文标签： HTML5，Canvas/">HTML5，Canvas

相关文章

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻