js-canvas（基本用法）

###1. canvas（画布）

　　<canvas>是HTML 5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形

　　　　默认宽高为300px*150px

　　基本概念和方法入门推荐： https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

###2.渲染上下文

　　<canvas>元素只是创造了一个固定大小的画布，要想在它上面绘制内容，我们需要找到它的渲染上下文

　　　　<canvas>元素有一个getContex（）方法，这个方法是用来获取渲染上下文和它的绘画功能

　　基本用法：

　　　　　　var canvas = document.querySelector("#cav")

　　　　　　if(canvas.getContext){ // 必须判断是否存在该方法，即判断浏览器是否支持canvas

　　　　　　　　var ctx = canvas.getContext("2d");

　　　　　　}

###3. .画布api
        oc.getContext("2d");
        oc.width
        oc.height
###4.上下文api
        ctx.fillRect(x,y,w,h):填充矩形
        ctx.strokeRect(x,ymwmh):带边框的矩形
        ctx.clearRect(0,0,oc.width,oc.height):清除整个画布
            注意原点的位置
        ctx.fillStyle
        ctx.strokeStyle
        ctx.lineWidth
        ctx.lineCap
        ctx.lineJoin
        ctx.moveTo(x,y):将画笔抬起点到x，y处
        ctx.lineTo(x,y):将画笔移到x，y处
        ctx.rect(x,y,w,h)
        ctx.arc(x,y,r,degS,degE,dir)
        ctx.arcTo(x1,y1,x2,y2,r):2个坐标，一个半径
                结合moveTo(x,y)方法使用，
                x,y:起始点
                x1,y1：控制点
                x2,y2：结束点
        ctx.quadraticCurveTo(x1,y1,x2,y2)   创建二次贝塞尔曲线
                结合moveTo(x,y)方法使用，
                x,y:起始点
                x1,y1：控制点
                x2,y2：结束点
                必须经过起点和终点
        ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3)   创建三次方贝塞尔曲线
                结合moveTo(x,y)方法使用，
                x,y:起始点
                x1,y1：控制点
                x2,y2：控制点
                x3，y3：结束点
                必须经过起点和终点
        ctx.fill()
        ctx.stroke()

        ctx.beginpath():清除路径容器
        ctx.closepath():闭合路径
            fill自动闭合
            stroke需要手动闭合
        ctx.save()
            将画布当前状态(样式相关变换相关)压入到样式栈中
        ctx.restore()
            将样式栈中栈顶的元素弹到样式容器中
            图像最终渲染依赖于样式容器

        ctx.translate(x,y):将原点按当前坐标轴位移x，y个单位
        ctx.rotate(弧度):将坐标轴按顺时针方向进行旋转
        ctx.scale(因子):
            放大：放大画布，画布中的一个css像素所占据的物理面积变大，画布中包含的css像素的个数变少
                    画布中图像所包含的css像素的个数不变
            缩小：缩小画布，画布中的一个css像素所占据的物理面积变小，画布中包含的css像素的个数变多
                    画布中图像所包含的css像素的个数不变

附加： canvas作品资源 https://www.html5tricks.com/tag/html5-canvas/

秒客网

js-canvas（基本用法）

相关文章