用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已经完成啦~来看看效果吧~
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHcAAACNCAIAAAACUnKiAAABuUlEQVR4nO3Xy03DQBRA0TQGOyiBZljRA81AEVTDPmy84CMiK46vJ865ejtH88ZHkaIcjlq/w9YXuIkoF/2rfNDsKBdRLqJcRLmIchHlIspFlIsoF1EuolxEuYhyEeUiykWUiygXUS6iXES5iHIR5SLKRZSLKBdRLqJcRLmIchHlIspFlIsoF1EuolxEuYhyEeUiykXbKB9f7q9uKFOmTJnyWEOZMmXKlMcaypQpU6Y81lCmTJky5bGGMmXKlEdX/iu+OcQgM1OWMuXhhzLlvQxlynsZypT3Mtson/d/6URLXj64xvSU8qrXmJ5uojzzkLvHjxOzXHnW+cn7/jhw1ocoU6b8+xDK626lXGylXGylXGylXGylXGylXGylXGylXGylfIGtF2yJcnCN6SnlVa8xPY2Vb212pbz8S0eZ8kjK789PJ4YyZcqUKVOmTJkyZcqUKe9BeU6UKY+tPOxQpryXoXzzyvN/zdaLctGtKD9sNJQpU6ZMmTJlypQpX7/y8ihTHkn58/XtjKFMmTJlypQpU6ZM+fqVt41y0f6VdzOUr19Z36NcdHllLYxyEeUiykWUiygXUS76Aivc/Q88AufvAAAAAElFTkSuQmCC" alt="" />啊哈哈哈哈啊哈哈哈哈,有没有爱上canvas呢?(canvas说:就算你不爱我,也有很多人爱得我死去活来的,不过,如果你要爱我的话,勉强也可以接受啦,╮(╯▽╰)╭)
后话:天气热了,大家注意防暑,大中午的就别出门了,哪凉快哪待着去吧——来自作死中午出门吃饭,结果中暑头痛要命的家伙的建议
用canvas画简单的“我的世界”人物头像的更多相关文章
- canvas画简单电路图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图
标题很难引人入胜,先放个效果图好了 如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/can_demo/demo/draw_rol ...
- 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图【强迫症福利】
标题很难引人入胜,先放个效果图好了 如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/demo_set/html_demo/can ...
- Canvas画椭圆的方法
虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生 oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...
- 深夜,用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- 10分钟,利用canvas画一个小的loading界面
首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...
- 用Canvas画一个刮刮乐
Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...
- Canvas 画圆
原文地址:http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b --------------------------------------- ...
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
随机推荐
- JavaScript Patterns 6.4 Prototypal Inheritance
No classes involved; Objects inherit from other objects. Use an empty temporary constructor function ...
- 用MsmqBinding投送message出现的一个灵异事件 【第二篇】
一直都在用Msmqbinding,也一直忽视了message里面的内容格式是什么样的,这也是微软给我们高层封装带给我们的开发效率,但同时一旦中间出了什么问题, 就不知道从何查起了.有个需求是这样的,服 ...
- 含有SilverLight项目的代码重用
很多时候,我们工程中不只是有SilverLight项目,然而我们想把其他的项目中的工具类,或者实体类复用到SilverLight项目中时,会发现SilverLight项目无法使用.这是个很普遍的现象. ...
- python class对象转换成json/字典
# -*- encoding: UTF-8 -*- class Student: name = '' age = 0 def __init__(self, name, age): self.name ...
- 在Windows下配置Python+Django+Eclipse开发环境
一.配置开发环境我的开发环境是:Python2.6.7 + Django1.6.2 + Eclipse1.安装Python2.安装Eclipse的Python插件PyDev如上两步如何操作请点击此进行 ...
- linux线程同步(5)-屏障
一.概述 barrier(屏障)与互斥量,读写锁,自旋锁不同,它不是用来保护临界区的.相反,它跟条 ...
- nodejs——网络编程模块
net模块提供了一个异步网络包装器,用于TCP网络编程,它包含了创建服务器和客户端的方法.dgram模块用于UDP网络编程. 参考链接:https://nodejs.org/api/net.html, ...
- AI(Adobe Illustrator)简单入门——米老鼠
成果: 步骤如下: 一.新建文档 二.选椭圆工具,在画布中间点一下,画一个100px*100px的圆,如下 三.同上,再画两个50px*50px小圆.点左上角的选择工具,点小圆中心,放好位置. 四.全 ...
- [转]js函数式变成之函数柯里化
本文转自:https://segmentfault.com/a/1190000003733107 函数柯里化是指参数逐渐求值的过程. 我觉得它是:降低通用性,提高专用性. 通常,柯里化是这样的过程,“ ...
- 跟我一起写 Makefile
转自 陈皓 的博客:http://blog.csdn.net/haoel/article/details/2886 1. 概述 2. 关于程序的编译和链接 3. Makefile 介绍 4. Make ...