canvas

Posted 2021-02-12 zshno1

var canvas = document.getElementById(‘c1‘);
            /*
             * getContext获取canvas的上下文环境；
             * 参数：2d （暂时还不支持3d）；
             * getContext(‘2d‘);对象是内建的html5对象，拥有多种回执路径、矩形、圆形、字符以及添加图像的方法
             */
            var ctx = canvas.getContext(‘2d‘);
            /*
             * 绘制矩形
             * fillRect(x,y,width,height) 绘制一个填充的矩形
             * strockRect(x,y,width,height) 绘制一个矩形的边框
             * clearRect(x,y,width,height) 清除指定的矩形区域，然后这块区域会变的完全透明
             */
            ctx.fillStyle = "rgba(200,0,0,1)";
            ctx.fillRect(10, 10, 50, 50);

            ctx.strokeRect(250, 350, 100, 100);
            ctx.strokeStyle = "rgba(0,0,0)";
            ctx.clearRect(10, 10, 20, 20);
            /*
             * 绘制路径
             * 1、创建路径起始点
             * 2、调用绘制方法去绘制出路径
             * 3、把路径封闭
             * 4、一旦路径生成，通过描边或填充路径区域来渲染图形
             * beginPath()新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
             * moveTo(x,y)把画笔 移动到指定的坐标(x,y)。相当于设置路径的起始点坐标。
             * lineTo(x,y);绘制一条从当前位置（moveTo(x,y)）到指定坐标(x, y)的直线
             * closePath()闭合路径之后，图形绘制命令又重新指向上下文中
             * stroke()通过线条来绘制图形轮廓
             * fill()通过填充路径的内容区域生成实心的圆
             */
            ctx.beginPath();
            ctx.moveTo(75, 50);
            ctx.lineTo(100, 75);
            ctx.lineTo(100, 25);
            ctx.closePath()
            ctx.stroke();
            /*
             *绘制圆弧
             * arc(x,y,r,startAngle,endAngle,anticlosewise)
             * 以(x,y)为圆心，以r为半径，从startAngle弧度开始到endAngle弧度结束。
             * anticlosewise是布尔值，ture表示逆时针，flase表示顺时针。（默认顺时针）
             */
            ctx.beginPath();
            ctx.arc(300, 350, 50, Math.PI, Math.PI * 2, false)
            ctx.closePath()
            ctx.stroke()
            /*
             *arcTo(x1,y1,x2,y2,radius) 
             * 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点
             * 第一条切线 起始点和控制点1决定的直线
             * 第二条切线 控制点1和控制点2决定的直线
             * 其实绘制的圆弧就是与这两条直线相切的圆弧
             */
            ctx.beginPath();
            ctx.moveTo(200, 200);
            ctx.arcTo(300, 200, 300, 300, 100);
            ctx.lineTo(300, 300);
            ctx.stroke()
            /**
             *贝塞尔曲线
             * 绘制二次贝塞尔曲线
             * quadraticCurveTo(cp1x,cpl1y,x,y)
             * 参数1和2：控制点坐标
             * 参数3和4：结束点坐标
             * 绘制三次贝塞尔曲线
             * bezierCurveTo(cp1x,cp1y,cp2x,xp2y,x,y)
             * 参数1和2：控制点1的坐标
             * 参数3和4：控制点2的坐标
             * 参数5和6：结束点的坐标
             */

            /*
             * fileStyle = color 
             * 设置图形的填充颜色
             * srtokeStyle = color
             * 设置图形轮廓的颜色
             * 1. `color` 可以是表示 `css` 颜色值的字符串、渐变对象或者图案对象。
             *    2. 默认情况下，线条和填充颜色都是黑色。
             *    3. 一旦您设置了 `strokeStyle` 或者 `fillStyle` 的值，
             *    那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，
             *    你需要重新设置 `fillStyle` 或 `strokeStyle` 的值。
             *    
             * 
             * 
             * */

            /*
             
             * line style
             * 1、lineWidth = value
             *    线宽。只能是正值。默认为1
             * 2、lineCap = type
             *       线条末端样式
             *   butt：线段末端以方形结束
             *      round：线段末端以圆形结束
             *   square：线段末端以方形结束，但是增加了一个宽度和线段相同。
             *             高度是线段厚度一半的矩形区域
             * 3、lineJoin = type
             *       同一个path内，设定线条与线条间接合处的样式
             *      round：通过填充一个额外的，圆心在相连部分末端的扇形，
             *             绘制拐角的形状。圆角的半径是线段的宽度。
             *      bevel：在相连部分的末端填充一个额外的以三角形为底的区域，
             *             每个部分都有各自独立的矩形拐角
             *      miter（默认）通过延伸相连部分的外边缘，使其相交于一点，
             *             形成一个额外的菱形区域。
             * 4、虚线
             * 用setLineDash方法和lineDashOffset属性来制定虚线样式。
             * setLineDash方法接受一个数组，来指定线段与间隙来交替；
             * lineDashOffset属性设置起始偏移量。
             * getLineDash() 返回一个包含当前虚线样式，长度为非负偶数的数组
             * */

            /*
             
             * 绘制文本
             * fillText(text,x,y[,maxWidth])在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的
             * strokeText(text,x,y[,maxWidth])在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的
             * 给文本添加样式
             * 1、font = value
             *     当前我们用来绘制文本的样式。这个字符串使用和css font属性相同的语法。默认的字体是10px sabs-serif
             * 2、textAlign = value
             *     文本对齐选项。可选的值包括：start，end，left，right，center默认值是start
             * 3、textBaseline = value
             *     基线对齐选项，可选的值包括：top hanging，plphabetic，ideographico，bottom默认值是alphabetic
             * 4、direction = value
             * 文本方向。可选的值包括：lte，rtl，inherit。默认值是inherit
             * */
            ctx.font = ‘50px 楷体‘
            ctx.strokeText(‘张省会‘, 100, 100)
            /*
             
             * 绘制图片
             *  创建img元素
             *    var img = new Image();   //创建一<img>元素
                img.src = ‘1.jpg‘;     //设置图片源路径
             * */

            /*
             
             * 绘制img
             * drawImage(img,0,0)
             * ctx.drawImage(img,x,y)
             * 参数1 要绘制的img 
             * 参数2、3  绘制的img在canvas中的坐标
             * 缩放图片
             * drawImage(image, x, y, width, height)?
             * 参数4、5控制canvas图片大小
             * 切片
             * drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
             * ? 第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。
             * 前4个是定义图像源的切片位置和大小，
             * 后4个则是定义切片的目标显示位置和大小。
             * */

            /*
              注意：考虑到图片是从网络加载，如果 drawImage 的时候图片还没有完全加载完成，
             * 则什么都不做，个别浏览器会抛异常。所以我们应该保证在 img 绘制完成之后再 drawImage。
             * */
            var img = new Image(); // 创建img元素
            img.onload = function() {
                ctx.drawImage(img, 0, 200, 400, 200)
                var dataURL = canvas.toDataURL();
                console.log(dataURL)
                console.log(document.getElementsByClassName(‘canvasImg‘)[0])
                document.getElementsByClassName(‘canvasImg‘)[0].setAttribute(‘src‘, dataURL)
            }
            img.src = ‘../corpper/images/mm_case_01.jpg‘; // 设置图片源地址

            /*
             
             * 状态的保存和恢复
             * save() 可以调用任意多次save方法（类似数组的push()）
             * Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。
             * restore() （类似书中的pop()）
             * 每一次调用restore方法，上一个保存的状态就从栈中弹出，所有设定都恢复。
             *
             * */

            /*
             
             * 变形
             * 1、translate(x,y) 用来移动canvas的原点到指定的位置
             * x 是左右偏移量，y是上下偏移量
             * 2、rotate() 
             * 旋转坐标轴 一个参数 它是顺时针方向的，以弧度为单位的值
             * 3、scale(x,y)缩小放大
             * 接受两个参数。x,y分别是横轴和纵轴的缩放因子，它们都必须是正值。
             * 值比 1.0 小表示缩 小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。
             *  4、transform（变形矩形）
             *     transform(a,b,c,d,e,f)
             * */
            //    ctx.save()
            ctx.translate(100, 10)
            //    ctx.restore()
            ctx.rotate(Math.PI / 180 * 20)
            ctx.scale(0.5, 0.5)

            /*
             
             * 合成
             * 我们总是将一个图形画在另一个之上，对于其他更多的情况，仅仅这样是远远不够的。
             * 比如，对合成的图形来说，绘制顺序会有限制。
             * 不过，我们可以利用 globalCompositeOperation 属性来改变这种状况。
             * globalCompositeOperation = type
             *  type有13个值
             * 1、source-over （默认设置）新图像会覆盖在原有图像
             * 2、source-in 仅仅会出现新图像与原来图像重叠的部分，其他区域都会变成透明的
             * 3、source-out 仅仅显示新图像与老图像没有重叠的部分，其余部分全部透明。
             * 4、source-atop 新图像 仅仅显示与老图像重叠区域。老图像仍然可以显示。
             * 5、desyination-over  新图像会在老图像的下面
             * 6、destination-in  仅仅新老图像重叠部分的老图像被显示，其他区域全部透明
             * 7、destination-out 仅仅老图像与新图像没有重叠的部分。注意显示的是老图像的部分区域
             * 8、destination-atop 老图像仅仅显示重叠部分，新图像会显示在老图像的下面。
             * 9、linghter 新老图像都显示，但是重叠区域的颜色做加处理
             * 10、darken 保留重叠部分最黑的像素
             * 11、linghten 保证重叠部分最量的像素
             * 12、xor 重叠部分会变得透明
             * 13、copy只有新图像会保留，其余的全部被清除
             * */

        }