随笔分类 - HTML5-Canvas
摘要：一、Canvas事件绑定说明 canvas元素和CanvasRenderingContext2D 上下文对象，处理的是位图、像素数据，只有一个标签。 所有的交互，判断处理都是针对cavans标签的。 对于交互性要求比较高的应用场景推荐使用svg矢量图模式。 canvas交互逻辑需要自己编码处理，当点
阅读全文
摘要：CanvasAPI参考文档推荐： https://www.canvasapi.cn/ 一、CanvasRenderingContext2D 属性 canvas : 当前元素对象 globalAlpha: 全局透明度，范围是0到1，范围以外的值会被忽略 globalCompositeOperation
阅读全文
摘要：一、HTMLCanvasElement canvas标签对象，首先是Element对象支持节点通用操作 canvas属性 width: canvas元素的宽度，绘制区域的宽度，单位像素，默认300px height:canvas元素的高度，绘制区域的高度，单位像素，默认150px canvas 尺寸
阅读全文
摘要：一、基础使用canvas的画圆和画弧度api <canvas id="cavasOne" width="300" height="300" style="border: 1px solid red;"></canvas> <script> var cavans = document.querySel
阅读全文
摘要：上段时间在项目中需要将方形图片处理为圆形图片，你可能会说直接用css设置border-radius: 50%就可以了，但是项目中还要将此图片的圆形图片作为一部分利用canvas将其绘制到一张背景图上面，所以就有了为何要用canvas来处理了。 代码示例： 显示结果： 更多： Canvas保存图片保存
阅读全文
摘要：使用Canvas绘图，将图片保存到本地方法 整理的代码1（推荐）： //下载图片事件 function downloadClick() { //判断是否是IE var fileName = 'testImg.jpg'; if (window.navigator.msSaveBlob) { //支持I
阅读全文
摘要：Canvas实现毛玻璃效果解决方式1：使用stackblur.js 在Android系统中实现图片的毛玻璃效果比较好用的类库是：Android StackBlur 官方Git地址：https://github.com/kikoso/android-stackblur 在前端Canvas中可以使用St
阅读全文
摘要：方式1，使用Css控制，但是有不兼容的时候 说明：在Google和FF中可以使用，在IE中需要考虑兼容问题 方式2，使用Canvas实现，推荐 参考： Canvas模糊化处理图片、毛玻璃处理图片之stackblur.js
阅读全文
摘要：canvas绘制图片，由于浏览器的安全考虑，如果在使用canvas绘图的过程中，使用到了外域的图片资源，那么在toDataURL()时会抛出安全异常： 解决方案1. 如果想使用toDataURL()生成图片文件的话，在canvas绘图过程中使用的图片应该是当前域下的。 解决方案2. 访问的服务器允许
阅读全文
摘要：HTML： 一、解决方案1是使用clearRect清空鼠标位置的像素 二、解决方案2是使用globalCompositeOperation,重叠处理，重叠的透明处理
阅读全文
摘要：定义和用法 createLinearGradient() 方法创建放射状/圆形渐变对象。 渐变可用于填充矩形、圆形、线条、文本等等。 提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。 提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradi
阅读全文
摘要：charCodeAt() 方法 定义和用法charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符
阅读全文
摘要：1.代码： 2.显示结果：
阅读全文
摘要：1.简单实例1 2.实例2： 3.实例3：
阅读全文
摘要：html5 canvas中支持对text文本进行渲染;直接的理解就是把text绘制在画布上，并像图形一样处理它（可以加shadow、gradient、pattern、color fill等等）；既然它的本质是文字，就会具有文字所特有的一些属性；本篇的侧重点也在于此；不过，在最后会增加一些图形填充效果
阅读全文
摘要：示例代码： 显示结果： 1.主要代码 step从0开始，每一帧增加0.05，相当于上图的横轴（X坐标）随着时间向右走 Math.cos(this.step += .05)则为上图对应的数轴（Y坐标），会随着step的增加，呈现1到-1的抛物线变换，正负值使得velX有左右方向 stepSize为步长
阅读全文
摘要：1.前台代码 2.绑定鼠标滚轮事件 显示结果：
阅读全文
摘要：1.加载显示图片 2.获取Canvas数据，显示到img标签 3.获取Canvas数据，显示到其他canvas中 4.Canvas中图片的平铺操作 更多像素处理： http://www.cnblogs.com/tianma3798/p/4264857.html HTML5 Canvas显示本地图片实
阅读全文
摘要：1.前台代码： 2.后台代码：
阅读全文
摘要：1.前台代码：
阅读全文