zyz00000000的博客

1.  ctx.isPointInPath(80,80)：判断点是否在上面路径的区域内。 ctx.isPointInStroke(80,50)：判断点是否在上面路径的边缘线上。 浏览器支持情况： （1）Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 isPointInPath() 方法。 注释：Internet Expl...

1.高斯模糊（Gaussian blur） 原理：将图片插入到canvas中，将canvas中的图片，getImageData得到图片的像素值，用高斯模糊函数进像素值进行处理后，再把值putImageData放到canvas中，就实现了图片的高斯模糊处理。 高斯模糊函数中的逻辑： 注意：此处是window整个页面进行加载，不可以用img来调用onload方法，会报错：高斯函数未被定义的错误。...

1. 浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。 注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素 2. canvas基础知识： canvas是inline-block类型。 （1）在css样式中，设置canva...

1. rect()方法：画矩形 rect(x, y, w, h)：矩形左上角的点为起点（x, y），w，h是矩形的宽高；                             效果：          问：矩形的最后的画笔在哪里？  答：还在（x, y）起始位置。 rect方法结合stroke和fill方法，也可以使用：fillRect(x, y, w, h) 或 stroke...

1. 圆角arcTo() 什么是圆角？就是直角，但是角是圆弧的 起始点：moveTo（x, y）；arcTo(x1, y1, x2, y2, r);                                        注意：r的大小不受其他值影响                                     注意：起始点是（x, y），终止点是切点，图片上的绿圈...

canvas画布的特点：超出画布的内容不显示。  1. 坐标轴的转换：下面几个方法的调用都会影响后续点的坐标。 （1）translate(x, y)：该方法之后的点的坐标，全部+x  +y 详情：http://www.w3school.com.cn/tags/canvas_translate.asp 注意：调用translate对之后的内容起作用。 （2）scale(x, y)：...

1. 填充图案 英语：pattern 图案 createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他 <canvas> 元素。 （1）图片 createPatter（image, "repeat | repeat-x | repeat-y | no-repeat") 该方法要结合：fillStyle()和fillRect()方法一起使用 ...

1.阴影 阴影的x轴偏移量：ctx.shadowOffsetX = 20; 阴影的y轴偏移量：ctx.shadowOffsetY = 20; 阴影的颜色：ctx.shadowColor = 'green'; 阴影模糊程度：ctx.shadowBlur=10; 2. 文本——在canvas中写入文本 关于文本的额外方法：（1）strokeText()：描边文本；（2）fillTe...

复习知识： beginPath() ：开启一个新的路径，在画直线的时候，需要开启一个新的路径，在上一个路径下，移动画笔位置 closePath()：闭合路径，在画图的时候，直接将未连接的图形，闭合连接 1. clip() 方法：从原始画布中剪切任意形状和尺寸 注意：clip()方法会将他上面代码所绘制的图形的区域裁剪，在裁剪区内的内容会显示，裁剪区之外的内容不会显示。 用begi...