随笔分类 - HTML5-Canvas
摘要：一、canvas 渐变 CanvasGradient 对象 1.线性渐变对象 CanvasRenderingContext2D.createLinearGradient()可以用来创建线性渐变对象。 如果渐变坐标在Canvas外部，也只会显示画布内的渐变效果。 语法 context.createLi
阅读全文
摘要：1.html5 canvas 绘制下雪效果 展示效果： ai写代码为主，人工辅助修改： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
阅读全文
摘要：一、html5 canvas 绘制节日礼花效果 展示效果： 此效果有ai写代码为主，人工辅助修改 <!DOCTYPE html> <html lang="zh-CN"> <head> <script type="module"> document.addEventListener("DOMConte
阅读全文
摘要：一、canvas 画线 lineTo（） 、moveTo() 、arcTo() 、quadraticCurveTo()、 bezierCurveTo() 、beginPath()、 closePath() 二、canvas 画多边形 线 strokeRect() context.strokeRect
阅读全文
摘要：一、html5 canvas 文本渲染 Html5 Canvas Text HTML5 Canvas Text实例1 HTML5 Canvas Text文本居中实例 更多： html5 canvas 简介 Canvas 事件绑定|Canvas事件处理 CanvasRenderingContext2D
阅读全文
摘要：一、canvas 简介<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 它最初由苹果内部使用自己 MacOS X WebKit
阅读全文
摘要：一、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.简单实例1 2.实例2： 3.实例3：
阅读全文
浙公网安备 33010602011771号