用canvas画简单的“我的世界”人物头像
前言：花了4天半终于看完了《Head First HTML5》，这本书的学习给我最大的感受就是，自己知识的浅薄，还有非常多非常棒的技术在等着我呢。[熊本表情]扶朕起来，朕还能学！
H5新增标签里面最喜欢的就是<canvas>，所以这次就用它写了个小demo，算是表达一下，对于它的爱意吧。
正文：
废话不多说，上代码~
html部分
<canvas id="myCanvas" width="800" height="800">想看图？快去升级你的浏览器吧~</canvas>
html部分只有这简单的一句，<canvas>内部包含的文本在浏览器不支持时输出，这真的是非常方便的用法呢（此处省略<html><body>等必备标签）
js部分
window.onload = function(){ //获取canvas的引用 var myCanvas = document.getElementById("myCanvas"); //获取context的引用 var context = myCanvas.getContext("2d"); //脸部 drawRect(context,15,0,90,130,"#ff813e"); //头发 context.fillRect(10,0,100,40); //左边鬓角 context.fillRect(10,40,20,20); //右边鬓角 context.fillRect(90,40,20,20); //左边眼睛 //左边眼睛眼眶 drawRect(context,25,70,25,15,"#fff"); //左边眼睛眼球 drawRect(context,38,70,12,15,"#3d46ce"); //右边眼睛 //右边眼眶 drawRect(context,70,70,25,15,"#fff"); //右边眼睛眼球 drawRect(context,70,70,12,15,"#3d46ce"); //鼻子 drawRect(context,54,88,12,12,"#ba7b56"); //嘴巴 drawRect(context,38,106,42,20,"#450000"); //舌头 drawRect(context,50,116,20,10,"#f494b9"); };
虽然看着有这么十几行代码，但是重复的部分很多，也就四个东西：
(1)document.getElementById(id值)
获取到我们的canvas，以便在以后的代码中运用它展现我们美丽的创作
(2)canvas.getContext("2d")
获取画布的上下文，返回一个对象，该对象中有非常多的方法可以为我们创作提供方便。（PS：虽然这里是2d，但并不代表就一定有3d，不过这也是件好事，说不定它会是由你实现的呢？）
(3)drawRect(context,x,y,rectWidth,rectHeight,color)
这是一个自定义函数，它将canvas.getContext("2d")返回的对象作为参数传入，以便我们在函数中调用该对象包含的各种方法。同时传入想要绘制的点的坐标，以及绘制的矩形的宽度和高度，还有就是，我们填充矩形所用的颜色。
(4)context.fillRect(x,y,rectWidth,rectHeight)
偶偶偶耶，终于出现了，我们调用了一个context引用对象的方法，它为我们在画布上绘制出一个黑色矩形。为啥是黑色？因为这是默认颜色啊，如果你想改变颜色，哼哼，那就接着看下面的部分。
接下来，我们就有请drawRect函数登场
function drawRect(context,x,y,rectWidth,rectHeight,color){ //开始一个路径 context.beginPath(); //起始位置移动到x,y参数指定的点 context.moveTo(x,y); //向坐标为(x+rectWidth,y)的点画一条路径 context.lineTo(x+rectWidth,y); //向坐标为(x+rectWidth,y+rectHeight)的点画一条路径 context.lineTo(x+rectWidth,y+rectHeight); //向坐标为(x,y+rectHeight)的点画一条路径 context.lineTo(x,y+rectHeight); //闭合路径 context.closePath(); //设置颜色 context.fillStyle = color; //填充由我们所绘路径形成的矩形 context.fill(); //设置颜色 context.fillStyle = "#000"; //设置描绘线条的宽度 context.lineWidth = 2; //描线 context.stroke(); }
在drawRect函数中，我们采用了一条边一条边的画矩形，当然你可以用其中用到的方法画出你喜欢的各种形状。其中要注意的是，我们画出的路径是不可见的，如果想看到路径，可以用stroke方法描出我们的路径，而此处我们画的路径是一个闭合的矩形，调用fill方法，则会用fillStyle指定的颜色填充该路径指定的内部区域。所以想要改变填充或者描线的颜色，就试试fillStyle属性吧~
至此，我们的demo已经完成啦~来看看效果吧~
啊哈哈哈哈啊哈哈哈哈，有没有爱上canvas呢？（canvas说：就算你不爱我，也有很多人爱得我死去活来的，不过，如果你要爱我的话，勉强也可以接受啦，╮(╯▽╰)╭）
后话：天气热了，大家注意防暑，大中午的就别出门了，哪凉快哪待着去吧——来自作死中午出门吃饭，结果中暑头痛要命的家伙的建议
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？