前言：花了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画简单的“我的世界”人物头像的更多相关文章

  1. canvas画简单电路图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图

    标题很难引人入胜,先放个效果图好了 如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/can_demo/demo/draw_rol ...

  3. 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图【强迫症福利】

    标题很难引人入胜,先放个效果图好了 如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/demo_set/html_demo/can ...

  4. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

  5. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  6. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  7. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  8. Canvas 画圆

    原文地址:http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b --------------------------------------- ...

  9. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

随机推荐

  1. Mongodb Manual阅读笔记：CH4 管理

    4 管理 Mongodb Manual阅读笔记:CH2 Mongodb CRUD 操作Mongodb Manual阅读笔记:CH3 数据模型(Data Models)Mongodb Manual阅读笔 ...

  2. PHP 5.3.0以上推荐使用mysqlnd驱动

    1. 什么是 mysqlnd 驱动 ? PHP 手册上的描述 : MySQL Native Driver is a replacement for the MySQL Client Library ( ...

  3. 【JSP】JSP基础学习记录（一）—— 基础介绍以及3个编译指令

    序: 从实现到现在一直是以.net为主,但偶尔也会参与一些其他语言的项目.最近需要对一个Java Web项目进行二次开发,一直没学习过JSP所以买了几本书自学试试.参考资料为<轻量级Java E ...

  4. mongo数据备份及恢复脚本

    #!/bin/bashtime="$(date +"%Y.%m.%d")" id=`echo "show dbs;"|/usr/local/ ...

  5. Eclipse汉化后怎么改回英文版（可切换中英文）

    Eclipse汉化后怎么改回英文版(可切换中英文) 很多朋友将MyEclipse汉化后还想改回英文的,其实只要修改MyEclipse的配置文件就可以了,这里我以MyEclipse7.0为例演示一下如何 ...

  6. 网格测地线算法（Geodesics in Heat）附源码

    测地线又称为大地线,可以定义为空间曲面上两点的局部最短路径.测地线具有广泛的应用,例如在工业上测地线最短的性质就意味着最优最省,在航海和航空中,轮船和飞机的运行路线就是测地线.[Crane et al ...

  7. BZOJ2763[JLOI2011]飞行路线 [分层图最短路]

    2763: [JLOI2011]飞行路线 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2523  Solved: 946[Submit][Statu ...

  8. 维护MMO项目的随想

    前提条件 近期我的工作内容是在维护一个历经几年的MMORPG大型项目,写下自己的一些感想 项目进度:游戏中基本的系统功能都有了,现阶段的主要工作就是修复系统的bug及重构部分系统. 维护老项目从何开始 ...

  9. Unity Project Wizard (最近打开的项目记录)

    最近打开工程列表 当用Unity打开过的项目越来越多之后,在最近打开项目记录框中就会变的很长,那么如何才能删除最近打开的记录呢? Unity4.x最近打开的工程记录 Unity5.x最近打开的工程记录 ...

  10. Eclipse如何解决启动慢

    一般在不对eclipse进行相关设置的时候,使用eclipse总是会觉得启动好慢,用起来好卡,其实只要对eclipse的相关参数进行一些配置,就会有很大的改善. 加快启动速度  1.在eclipse启 ...