百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML 游戏HTML5 支持CSS 谷歌字体
当前位置：网站首页 > 技术文章 > 正文

用canvas画简单的“我的世界”人物头像

myzbx 2025-05-05 17:40 16 浏览

前言：花了4天半终于看完了《Head First HTML5》，这本书的学习给我最大的感受就是，自己知识的浅薄，还有非常多非常棒的技术在等着我呢。[熊本表情]扶朕起来，朕还能学！

H5新增标签里面最喜欢的就是<canvas>，所以这次就用它写了个小demo，算是表达一下，对于它的爱意吧。

正文：

废话不多说，上代码~

html部分

Bash
<canvas id="myCanvas" width="800" height="800">想看图？快去升级你的浏览器吧~</canvas>

html部分只有这简单的一句，<canvas>内部包含的文本在浏览器不支持时输出，这真的是非常方便的用法呢（此处省略<html><body>等必备标签）

js部分

Bash
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函数登场

Bash
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说：就算你不爱我，也有很多人爱得我死去活来的，不过，如果你要爱我的话，勉强也可以接受啦，╮(╯▽╰)╭）

后话：天气热了，大家注意防暑，大中午的就别出门了，哪凉快哪待着去吧——来自作死中午出门吃饭，结果中暑头痛要命的家伙的建议

相关推荐

路痴的福音 谷歌地图AR实景导航Live View正式上线

2月份起，谷歌地图开始测试一项新功能，即是在行人导航功能中加入AR实景导航。用户可以通过设备屏幕，在实际的街道中见到路线指示，使导航功能不只在地图上，而是更融合在真实环境中。谷歌地图AR实景导航（图源...

Google地图怎么设置中文 谷歌地图app设置语言为中文

Google地图是一款知名的地图导航客户端，这是一款很好用的地图软件，Google地图怎么设置中文呢，不少人可能不是很清楚，下面就和小编一起来看看吧!Google地图怎么设置中文方法1、点击打开谷歌地...

谷歌地图说这里能过

来源：日本沙雕日常谷歌地图说这里能过#微博新鲜事#

谷歌地图已可离线导航 仅安卓机可用

谷歌已经在今年的谷歌IO大会上确认了地图离线导航功能，如今该功能已经可以在安卓机上使用了。这对网络资源较为贫瘠且相对昂贵的国家来说可谓提供了便利。用户需要提前下载所需旅程的部分地图，虽然不能获得实时路...

谷歌地图测试速度更快的AR实时视图

上个月谷歌为了庆祝谷歌地图成立15周年，为谷歌地图推出了新的图标，并且重新设计了移动应用程序。谷歌还预览了一些即将推出的功能，现在正在测试地图导航之外更快的实时视图（LiveView）访问。谷歌之...

谷歌地图新功能 离线地图可导航和搜索

【中关村在线软件资讯】5月29日消息：在今天凌晨召开的GoogleI/O开发者大会上，谷歌公布了一些关于地图的新功能。谷歌地图离线模式新版谷歌地图有更好用的离线地图，可以在无网络的情况下搜索地点、查...

谷歌地图变这样，谁还花钱去旅游?

足不出户，在手机上能身临其境的游览世界各地。文章来源：创下一个新ID：cxygx1作者：创新君编辑：卝生话说在前天的GoogleI/O2022开发人员活动中，谷歌推出了一种全新的地图模式，可以...

新版谷歌地图将添新功能:知道你想去哪儿

据外媒TheVerge报道，谷歌即将为安卓版谷歌地图增加一些新的功能，从而使之变得更加智能，比如可以推算出用户的目的地等。新版谷歌地图将添新功能（图片来自TheVerge）报道称，升级后的谷歌地图将会...

谷歌地图安卓版获效率改进，11.136.x更新引入“表单风格”卡片

IT之家7月16日消息，谷歌在今年2月宣布将对自家地图应用进行大修，目前相关更新已经实装入谷歌地图11.136.x版本中，主要围绕UI进行效率改进。谷歌提到，现在用户在查找地址时，...

谷歌地图安卓/iOS版界面大修，超漂亮

IT之家（www.ithome.com）：谷歌地图安卓/iOS版界面大修，超漂亮IT之家报道，Android5.0已经正式到来，谷歌旗下的应用为了迎接安卓5.0都采用了全新的MaterialDes...

谷歌地图在美国启用“美国湾”称呼

参考消息网2月11日报道据法新社2月11日报道，美国总统特朗普10日对谷歌地图将墨西哥湾更名为“美国湾”表示欢迎，这符合他在1月底重返白宫后签署的法令之一。这一占超主导地位的地图服务现在为位于美国的用...

外交部回应谷歌地图涉南海标注:南海一直是国际社会公认通用地名，被广泛接受

【环球时报-环球网报道记者李萌】在4月15日外交部例行记者会上，有记者提问称，据报道，谷歌地图显示了“西菲律宾海”的名称，此前这里显示的是南海。有人称这有助于保护菲律宾的主权，请问中方对此有何评论？...

谷歌地图首曝数据:覆盖全球98%居住区，已拍千万英里街景

12月13日，谷歌透露了其街景车（StreetViewcar）等设备为绘制世界地图所做的工作。目前，谷歌已经捕获了超过1000万英里的街景图像，这个距离相当于绕地球400圈。旗下航空地图服务谷歌地...

美媒:谷歌称，当联邦地图作出更改时，谷歌地图将使用“迪纳利峰”及“墨西哥湾”新名称

来源：环球网【环球网报道】据美国全国广播公司（NBC）等媒体报道，美国谷歌公司27日称，当联邦地图作出更改时，谷歌地图将使用“迪纳利峰”和“墨西哥湾”的新名称，即“麦金利山”和“美国湾”。本月20日...

谷歌地图迎来15周年重大更新 界面重新设计 新增贴心功能

昨日，恰逢谷歌地图15周年生日，谷歌地图便迎来重大更新。不仅仅界面重新设计，还添加了许多贴心功能。名为“TransitAttributes”的新功能会根据过去用户共享的详细信息，向人们提供有关公共场...

一周热门
最近发表
标签列表