HTML5 Tricks

发表于

线条

线条样式
  • lineCap 设置或返回线条末端线帽的样式。
  • lineJoin 当两条线交汇时，设置或返回所创建边角的类型


1
2
//向线条的每个末端添加平直/圆形、正方形的边缘
context.lineCap="butt|round|square";

lineJoin 线条交叉


1
2
//斜角、圆角、尖角
context.lineJoin="bevel|round|miter";

Canvas宽高

canvas里的宽高和css里的宽高

删除canvas里的宽高，宽：400；高：300；写在style里的效果：

  • 为什么两者的效果会不一样呢？
    　　canvas跟其他标签一样，也可以通过css来定义样式。但这里需要注意的是：canvas的默认宽高为300px 150px,在css中为canvas定义宽高，实际上把宽高为300px 150px的画布进行了拉伸，如果在这样的情况下进行canvas绘图，你得到的图形可能就是变形的效果。所以，在canvas绘图时，应该在canvas标签里直接定义宽高。

canvas宽高设置

  • 分别用两种方式设置canvas的高度
    1
    2
    3
    $("#myCanvas").attr({
        "height": 300
    });
1
2
3
4
5
6
console.log("canvas高度", $("#myCanvas").attr("height"), $("#myCanvas").attr("width"));
$("#myCanvas").attr({
    "height": 300
});
var height = $("#myCanvas").height(200);
console.log("canvas高度", height, $("#myCanvas").attr("height"), $("#myCanvas").attr("width"));
1
<canvas id="myCanvas" width="800" height="300" style="background: url(&quot;./images/keji.jpg&quot;) 0px 0px no-repeat; display: block; height: 200px;">你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas>