0.5px直线：

1.采用meta viewport的方式

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px

要记得viewport只针对于移动端，只在移动端上才能看到效果

2.采用transform: scale()的方式

transform: scale(0.5,0.5);

前端面试题——如何画一条0.5px的线 - 简书

canvas与svg的区别

　　　　1、svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布；

　　　　2、svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿

canvas、svg、canvas与svg的区别 - web会子 - 博客园

canvas绘制图表

Canvas 实现绘制图表 - 吃饭睡觉打豆豆o - 博客园

画一条直线：

//获取画布
var canvas=document.querySelector("#cont")
//获取画布上下文
var ctx=canvas.getContext('2d')
//开始一条新路径
ctx.beginPath()
//移动到起始点
ctx.moveTo(100,100)
//确定结束点
ctx.lineTo(400,400)
//着色，画的任何图形都要着色
ctx.stroke()
//结束路径
ctx.closePath()

清除画布：


//清除画布(清除一个矩形区域，四个坐标分别是矩形左上角x坐标、矩形左上角y坐标、矩形宽度、矩形高度)
ctx.clearRect(100,100,20,30)

画圆：

canvas基础学习视频：?

这可能是B站讲的最好的canvas教程，8小时打通canvas全套教程丨2021最新版，前端后台管理系统，图表，各种特效制作必学_哔哩哔哩_bilibili

Transform?:变形

1.平移：不影响页面布局

translate:(-50%,-50%)：向右下平移自身的50%

translateX

translateY

translateZ：调整元素和人眼之间的距离

2.旋转：

rotateX()：以X轴为中心旋转

rotateY()：以Y轴为中心旋转

rotateZ()：以z轴为中心旋转

backface-visibility: hidden; 背面隐藏效果

transform-style:preserve-3d 设置3D变形效果

3.缩放

scaleX()

scaleY()

animation

关键帧：设置动画执行的每一步骤

@keyframes kf{
    from{ /*动画开始的位置，也可以用 0%*/

    }
    to{ /*动画结束的位置，也可以用 100%*/

    }
}
@-webkit-keyframes kf{} /*用于chrome*/

以下写在需要动画的css里面：

div{
    animation-name:kf;
    animation-duration:2s;
    animation-delay:4s;
    animation-timing-function:linear;

    animation-iteration-count:infinite; //执行次数
    animation-direction://动画运行方向normal、reverse、alternate
    animation-play-state://设置动画执行状态running、paused，可用于鼠标悬停和移开时
    animation-fill-mode://动画运行结束是否返回原位 none(原位),forwards(结束位置),backwords(延迟时，元素就会处于开始位置),both(结合forwards和backwords)
}