div内容里面的标签显示_HTML5实例003——用javascript在canvas标签画基本形状

看，只要会往``里面画一个长方形，就可以做出来这样子的效果，画比较多的正方形实现像素风头像生成器：

赶时间的客官可以直接去`正文开始`那里。

今天有个想法，整成手把手系列，就是假设客官是一个从来没有接触过网页编辑、代码、编程的新手。所以会说的比较详细，比较累赘，大神们笑笑点个赞就好了，哈哈。

我的想法(初心)是，将一个有兴趣写网页，但是不知道从何开始的人，通过几篇很小的实例，让他产生兴趣，跟出效果，形成自己动手去学习的动力，便是最好了。

所以，努力写得通俗易懂，简单直接，抛开别的因素，先实现出来再说，那时候学写代码的时候也是听师傅说“先有后优”，所以，粗糙点不管，能说明问题便好。

有客官对于我前面几天码的字，有反馈，有问题提出来，非常感谢有人搭理我。提出来的1,web字体设置的方法，2,响应式布局，3,网页上面音频播放的多浏览器兼容问题，4,不知从何入手学习一个东西...我都在拿着小本记下来，闲暇时间赶紧去搜集一些比较好的方法，尽力去更新分享这些方面的一小点经验，还请各位客官多多搭理我呀。

这里先把昨天最后那个小坑给添一下，那个响应式布局，是通过在CSS里面定义不同屏幕宽度时候使用不同的样式，直接帖代码出来吧：

@media screen and ( max-width: 1920px ) { div.content { height: 600px; width: 300px; float: left; padding-top: 97px; } div.sider { float: right; } body { width: 600.111111px; margin: 0 auto; }}@media screen and ( max-width: 720px ) { div { display: block; clear:both; height: auto; } div.content { display: block;  height: auto;  width: 100%; } div.sider { display: block; width: 100%; padding-bottom: 100px; } body { margin: 0; padding: 0; width: 100%; }}

在1920到720这么宽的时候，两个div左右浮动，在小于720的时候，两个div显示模式改为块级元素，宽度定义为100%，也就变成竖着排列了。就这样子。

接下来，正文开始：

1, 只用一个文件：`t.html`就好了，忘掉那些什么最佳实践，干就完了，新建文本文件，然后重命名成`t.html`，注意，重命名成网页之后，文件的图标会发生变化，不是以前文本文档时候的样子，如果图标没变，你极可能重命名成了`t.html.txt`这样子的，我的小视频里面有如何设置windows7显示扩展名，看看也是极好的。

2, 很简单的网页基本代码：

 像素风头像生成器

复制上面的代码到`t.html`里面，然后保存，存成utf-8编码格式(实例001里面有个图片演示了怎么保存)。

3, 继续编辑`t.html`文件，在两个注释的地方，第一个放入``标签，同时给它样式，定义大小(宽500,高400)，还有一个边框(1像素实心线奶奶灰色)，`标签中间的一句话，在不支持canvas标签的浏览器里面会被显示出来`：

  快看，这里有一个还在用IE6/8的老实人，大家快来~~ 

4, 第2步里面的第二个注释的位置，加入javascript代码，看代码注释理解语句的含义：

效果：

在画布的左上角，坐标为0,0

大小位置标注：

嗯，就是这样

是不是很简单呀，在网上可以搜索`html5 canvas 基本开关`了解更多，不知客官可否通过这个别样的“画布”画出来一个五角星呢？欢迎挑战。

晚安