随笔分类 -  HTML5-Canvas

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