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只有新图像会保留，其余的全部被清除 * */ }