Canvas基础及签名案例

Canvas基础

canvas用于通过JavaScript来绘制图形
canvas只有两个属性—width和height（默认：width:300px,height:150px）

window.onload = function() {
        //获取画布
        var canvas = document.querySelector('#test')
            //检查支持性
        if (canvas.getContext) {
            //获取画笔
            var ctx = canvas.getContext("2d")
        }
    }

绘制矩形

Canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。

1. 填充矩形：fillRect(x,y,width,height)
2. 边框矩形：strokeRect(x,y,width,height)
3. 清除矩形：clearRect(x,y,width,height)

注意：x与y为canvas画布上所绘制的矩形的左上角（相对于原点的坐标）；width和height不加单位；
边框渲染问题：
canvas渲染矩形边框时，边框宽度平均分在偏移位置的两侧。
ctx.strokeRect(10,10,50,50)边框会渲染在9到11之间，此时渲染出的边框为2px。
ctx.strokeRect(10.5,10.5,50,50)边框会渲染在10到11之间，此时渲染出的边框为=1px==。

绘制样式

渲染思维有别于浏览器本身的渲染机制

1. fillStyle:设置图形的填充颜色
2. strokeStyle：设置图形轮廓颜色
3. lineWidth：设置当前绘线粗细
4. lineJoin：设定线条与线条间接合处的样式

注意：
lineWidth属性值必须是正数。且该属性存在渲染覆盖，即在重叠部分，后调用的会覆盖掉先调用的。
lineJoin中圆角round，斜角bevel，直角miter（默认）

    window.onload = function () {
        //获取画布
        var canvas = document.querySelector('#test')
        //检查支持性
        if (canvas.getContext) {
            //获取画笔
            var ctx = canvas.getContext("2d")
            ctx.fillStyle = "pink"
            ctx.strokeStyle = "blue"
            //绘线粗细(覆盖渲染)
            ctx.lineWidth = 10
            //线条样式
            ctx.lineJoin = "round"
            ctx.fillRect(0, 0, 100, 100)
            ctx.strokeRect(100.5, 100.5, 100, 100)
            // ctx.clearRect(0, 0, 100, 100)
        }
    }

绘制路径

• ctx.save()
  • fillStyle/strokeStyle/lineWidth/lineJoin
• ctx.beginPath()：清空路径容器
  • moveTo(x,y)：设置起点
  • lineTo(x,y)：将笔触移动到指定坐标
  • closePath()：闭合路径（调用fill()时自动闭合，stroke()时不会自动闭合）
• ctx.restore();

关于save和restore

一道题目：根据下面代码，请问最后的矩形是什么颜色填充？

window.onload = function() {
        //获取画布
        var canvas = document.querySelector('#test')
            //检查支持性
        if (canvas.getContext) {
            //获取画笔
            var ctx = canvas.getContext("2d")
            ctx.save()
            ctx.fillStyle = "red"
            ctx.save()
            ctx.fillStyle = "orange"
            ctx.fillStyle = "yellow"
            ctx.save()
            ctx.fillStyle = "green"
            ctx.save()
            ctx.fillStyle = "blue"
            ctx.save()
            ctx.beginPath()
            ctx.restore()
            ctx.restore()
            ctx.restore()
            ctx.restore()
            ctx.fillRect(50, 50, 100, 100);
        }
    }

答：

每次调用样式API时，都会往样式容器里做等级。当调用save时，样式容器的属性值就会进入到样式栈中。当调用restore时，属性值会出栈进入到样式容器里。有图解可得最后矩形的填充颜色为红色。

Canvas实现签名

    window.onload = function() {
        //获取画布
        var canvas = document.querySelector('#test')
            //检查支持性
        if (canvas.getContext) {
            //获取画笔
            var ctx = canvas.getContext("2d")
        }
        //鼠标按下
        canvas.onmousedown = function(event) {
            //兼容IE浏览器和非IE浏览器
            event = event || window.event
            if (canvas.setCapture) {
                canvas.setCapture()
            }
            ctx.beginPath()
            ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop)
            document.onmousemove = function(event) {
                ctx.save()
                ctx.strokeStyle = "blue"
                event = event || window.event
                ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop)
                ctx.stroke()
                ctx.restore()
            }
            document.onmouseup = function() {
                document.onmousemove = document.onmouseup = null;
                if (document.releaseCapture) {
                    document.releaseCapture();
                }
            }
            return false
        }
    }

HTML代码：

    <canvas id="test" width="400" height="400">
        <!-- 替换内容 -->
        <span>您的浏览器不支持画布元素 请您换成谷歌浏览器</span>
    </canvas>

CSS代码：

        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            height: 100%;
            overflow: hidden;
        }
        
        body {
            background: black;
        }
        
        #test {
            background: white;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }