canvas&SVG 各种坑 记录

给canvas设置高度 宽度 坑

$("canvas").attr("width",w).attr("height",40);   正确

$("canvas").css("width",w).css("height",40);     画笔比例会出问题

svg 和 jquery 一起使用 坑

SVG DOM和HTML DOM 是不一样的 也许你在浏览器里看到的是一样的

jquery 对dom的操作是html dom的，当你试图用jquery 向dom里添加svg 元素时，被添加的是html dom而不是svg dom 所以SVG 绘图不会生效。但是使用d3.js如d3.apend("svg:g")是生效的。具体可以看源码查看。

CANVAS 在浏览器里其实是有最高绘制限制的再超过就会出现不可预知的错误，高度大约3到4个屏幕