HTML5技术

用canvas画简单的“我的世界”人物头像 - 玉菲莎

字号+ 作者:H5之家 来源:H5之家 2016-07-27 14:00 我要评论( )

前言:花了4天半终于看完了《Head First HTML5》,这本书的学习给我最大的感受就是,自己知识的浅薄,还有非常多非常棒的技术在等着我呢。[熊本表情]扶朕起来,朕还能学! H5新增标签里面最喜欢的就是canvas,所以这次就用它写了个小demo,算是表达一下,对

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

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

正文:

废话不多说,上代码~

html部分

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

 

js部分

window.onload = function(){ myCanvas = document.getElementById("myCanvas"); 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说:就算你不爱我,也有很多人爱得我死去活来的,不过,如果你要爱我的话,勉强也可以接受啦,╮(╯▽╰)╭)

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

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 《人民的名义》---简单的文本分析 - 视野

    《人民的名义》---简单的文本分析 - 视野

    2017-04-22 18:00

  • canvas知识点 - H.U.C-王子

    canvas知识点 - H.U.C-王子

    2017-04-16 10:02

  • [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore(三) - 反骨仔(二五仔)

    [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore(三) - 反

    2017-04-02 11:00

  • canvas实现黑客帝国矩形阵 - 风雨后见彩虹

    canvas实现黑客帝国矩形阵 - 风雨后见彩虹

    2017-03-30 09:00

网友点评
g