月度归档:2013年10月

HTML5 Canvas 学习笔记之需要注意的问题以及知识点记录

  1. canvas元素实际上有两套尺寸。一个是元素本身的大小,还有一个是元素绘图表面(drawing surface)的大小,这两个尺寸默认为300px * 150px。如果给canvas设置width、height属性的话等于同时设置了canvas本身的大小和drawing surface的大小(正规的设置),如果没有给canvas设置width、height属性而只是通过css给canvas设置width、height的话等于只设置了canvas元素本身的大小而没有设置drawing surface的大小,此时浏览器会对drawing surface进行缩放,使其符合元素本身的大小,现象就好像是一张300*150的图片被缩放成其它的尺寸。
  2. fillText(‘bbs0101’, 0, 0) 方法是以文字左下角为基准绘制的
  3. Canvas环境状态的保存与恢复:context.save()   /   context.restore()
  4. Canvas画布状态的保存与恢复:
    drawingSurfaceImageData = context.getImagesData(0, 0, canvas.width, canvas.height);
    context.putImageData(drawingSurfaceImageData, 0, 0);
  5. 绘制线段时,如果要绘制一条真正1像素宽的线段,你必须将该线段绘在一像素中间的位置上(例如绘制横线,y=50.5),这样绘制出来的是一像素宽的线段,不能绘制在两个像素之间(例如绘制横线,y=50),这样绘制出来的是2像素宽的线段

 

不定宽的浮动元素水平居中,纯Css解决方案

最常见的一个需求就是一排翻页按钮要水平居中显示,而且按钮数量不固定,导致总体宽度不固定,看代码,看效果图吧。。。

效果图:

不定宽的浮动元素水平居中,纯css解决方案

css:

.box {
		width:100%;
		height: 26px;
		background:#fff;
		border-bottom:4px solid #000;
}
.box ul {
		float:left;
		list-style:none;
		position:relative;
		left:50%;
		margin:0;
		padding:0;
}
.box ul li {
		display: block;
		float: left;
		list-style: none;
		position: relative;
		right: 50%;
		margin: 0;
		padding: 0;
}
.box ul li a {
		display: block;
		background: #ddd;
		color: #000;
		text-decoration: none;
		line-height: 20px;
		margin: 0 0 0 1px;
		padding: 3px 10px;
}
.box ul li a:hover {
		background:#369;
		color:#fff;
}

html:

<div class="box">
    <ul>
        <li>
            <a href="#">1</a>
        </li>
        <li>
            <a href="#">2</a>
        </li>
        <li>
            <a href="#">3</a>
        </li>
        <li>
            <a href="#">4</a>
        </li>
        <li>
            <a href="#">5</a>
        </li>
        <li>
            <a href="#">6</a>
        </li>
        <li>
            <a href="#">7</a>
        </li>
        <li>
            <a href="#">8</a>
        </li>
   </ul>
</div>

css3 box-flex宽度会被内容撑开的解决方案

问题描述:当设置了box-flex样式的盒子内部的内容过多时,盒子的宽度就会被内容撑大,不再按照box-flex设置的比例计算宽度
解决方法:给该盒子同时设置width: .001%;即可解决

请注意是0.001%,这个数字不是固定的,越小越好,当设置为1%时会出现几像素的出入,一般设置成0.1%时基本就没有误差了,这个问题并不是box-flex的bug,是由box-flex的工作原理导致的。

关于box-flex的具体讲解可以看

CSS 3属性之盒布局box