Canvas
Canvas相关的知识
叨唠
弘德、博学、敏行、敢先
展开
-
html5的canvas知识总结(8)isPointInPath、isPointInStroke、解决canvas高分屏模糊、非零环绕原则
1. ctx.isPointInPath(80,80):判断点是否在上面路径的区域内。ctx.isPointInStroke(80,50):判断点是否在上面路径的边缘线上。浏览器支持情况:(1)Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 isPointInPath() 方法。注释:Internet Expl...原创 2018-09-15 16:25:20 · 3024 阅读 · 2 评论 -
HTML5canvas实现高斯模糊、刮刮乐
1.高斯模糊(Gaussian blur)原理:将图片插入到canvas中,将canvas中的图片,getImageData得到图片的像素值,用高斯模糊函数进像素值进行处理后,再把值putImageData放到canvas中,就实现了图片的高斯模糊处理。高斯模糊函数中的逻辑:注意:此处是window整个页面进行加载,不可以用img来调用onload方法,会报错:高斯函数未被定义的错误。...原创 2018-09-16 22:06:29 · 1653 阅读 · 0 评论 -
html5的canvas知识总结(1)
1. 浏览器支持Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素2. canvas基础知识:canvas是inline-block类型。(1)在css样式中,设置canva...原创 2018-09-13 17:35:11 · 315 阅读 · 0 评论 -
html5的canvas知识总结(2)
1. rect()方法:画矩形rect(x, y, w, h):矩形左上角的点为起点(x, y),w,h是矩形的宽高; 效果: 问:矩形的最后的画笔在哪里? 答:还在(x, y)起始位置。rect方法结合stroke和fill方法,也可以使用:fillRect(x, y, w, h) 或 stroke...原创 2018-09-13 20:05:52 · 215 阅读 · 0 评论 -
html5的canvas知识总结(3)
1. 圆角arcTo()什么是圆角?就是直角,但是角是圆弧的起始点:moveTo(x, y);arcTo(x1, y1, x2, y2, r); 注意:r的大小不受其他值影响 注意:起始点是(x, y),终止点是切点,图片上的绿圈...原创 2018-09-13 22:05:35 · 168 阅读 · 0 评论 -
html5的canvas知识总结(4)
canvas画布的特点:超出画布的内容不显示。 1. 坐标轴的转换:下面几个方法的调用都会影响后续点的坐标。(1)translate(x, y):该方法之后的点的坐标,全部+x +y详情:http://www.w3school.com.cn/tags/canvas_translate.asp注意:调用translate对之后的内容起作用。(2)scale(x, y):...原创 2018-09-14 14:15:35 · 266 阅读 · 0 评论 -
html5的canvas知识总结(5)
1. 填充图案英语:pattern 图案createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频,或者其他 <canvas> 元素。(1)图片createPatter(image, "repeat | repeat-x | repeat-y | no-repeat") 该方法要结合:fillStyle()和fillRect()方法一起使用...原创 2018-09-14 16:57:27 · 229 阅读 · 0 评论 -
html5的canvas知识总结(6)
1.阴影阴影的x轴偏移量:ctx.shadowOffsetX = 20;阴影的y轴偏移量:ctx.shadowOffsetY = 20;阴影的颜色:ctx.shadowColor = 'green';阴影模糊程度:ctx.shadowBlur=10;2. 文本——在canvas中写入文本关于文本的额外方法:(1)strokeText():描边文本;(2)fillTe...原创 2018-09-14 21:50:57 · 314 阅读 · 0 评论 -
html5的canvas知识总结(7)clip、globalCompositeOperation、drawImage、toDataURL、getImageData、putImageData
复习知识:beginPath() :开启一个新的路径,在画直线的时候,需要开启一个新的路径,在上一个路径下,移动画笔位置closePath():闭合路径,在画图的时候,直接将未连接的图形,闭合连接1. clip() 方法:从原始画布中剪切任意形状和尺寸注意:clip()方法会将他上面代码所绘制的图形的区域裁剪,在裁剪区内的内容会显示,裁剪区之外的内容不会显示。用begi...原创 2018-09-15 12:18:50 · 1903 阅读 · 0 评论