51dev.com IT技术开发者社区

51dev.com 技术开发者社区

canvas

canvas与svg的区别

canvas与svg的区别

 1.历史:canvas是html5提供的新元素。而svg存在的历史要比canvas久远,已经有十几年了。svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属性)描述二维图形的语言。2.功能:canvas可以看做是一个画布,其绘制出来的图形为标量图。可以在canvas...

小程序canvas 变换

小程序canvas 变换

  varctx=wx.createCanvasContext('base');varcenterX=375/2;varcenterY=200;varrotate=90;varscale=2;ctx.save();//保存状态ctx.translate(centerX,centerY)ctx.rotate(rotate...

canvas 下载

canvas 下载

functionsaveFile(data,filename){varsave_link=document.createElementNS('http://www.w3.org/1999/xhtml','a');save_link.href=data;save_link.download=filename;vareve...

canvas toDataUrl 跨域问题

canvas toDataUrl 跨域问题

使用canvas的toDataUrl方法会遇到跨域问题chrome会报下面的错误:UncaughtSecurityError:Failedtoexecute'toDataURL'on'HTMLCanvasElement':Taintedcanvasesmaynotbeexported. Firefox会报下面...

canvas在手机qq浏览器显示错乱

canvas在手机qq浏览器显示错乱

做大转盘的时候,使用html5canvas生成转盘,但在手机qq浏览器中显示错乱。原本想在后台生成大转盘图片,后来想一想既然用图片来实现,还不如直接由canvas导出toDataURL在页面上使用img代替canvas mark下,遇到困难或许最好的办法是换个方向...

canvas探照灯效果

canvas探照灯效果

  canvas中的clip()方法用于从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)  也可以在使用clip()方法前通过使用save()方法对当前画布区域进行保存,并在以后的任意时间通过restore()方法对其进行恢复  接下来使用cli...

canvas动态小球重叠效果

canvas动态小球重叠效果

  在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动。但是,如果用canvas去实现,却是另一种思路。本文将详细介绍canvas动态小球重叠效果 效果展示静态小球  首先,生成随机半径、随机位置的50个静态小球<buttonid="btn">按钮</button>...

canvas贝塞尔曲线效果演示

canvas贝塞尔曲线效果演示

...

canvas粒子时钟

canvas粒子时钟

  本文将使用canvas实现粒子时钟效果 效果展示点阵数字  digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵。每个数字的点阵表示是7*10大小的二维数组  通过遍历数字点阵的二维数组,当该位置的值为1时,则绘制一个粒子,否则不绘制  将绘制数字的函数命名为render...

canvas粒子系统的构建

canvas粒子系统的构建

  本文将从最基本的imageData对象的理论知识说开去,详细介绍canvas粒子系统的构建 效果演示  下面是实例效果演示,博文结尾有全部源码 imageData  关于图像数据imageData共有3个方法,包括getImageData()、putImageData()、createImage...

canvas自适应圆形时钟绘制

canvas自适应圆形时钟绘制

  前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示  最终自适应圆形时钟的效果如下所示 功能分析  下面来分析一下该圆形时钟的功能  【1】静态背景  对于时钟来说,背景是不变的,包括外层钟框、内层圆点及数字、以及中心点的固定按扣  【2】动态时钟  时...

canvas图形绘制

canvas图形绘制

  前面分别介绍了canvas的基础用法和进阶用法,本文将使用canvas的各种语法进行图形绘制 绘制线条【绘制线条】  下面来尝试绘制一段线条<canvasid="drawing"style="border:1pxsolidblack"><p>Thecanvaselementisno...

使用canvas进行图像编辑

使用canvas进行图像编辑

  本文将分为几个小功能的形式来详细介绍canvas图像编辑 缩放  下面是一张分析图,假设默认情况下,图片和canvas宽高相同。图片的缩放(scale)范围为0.5到3,缩放时改变的是图片的大小和图片的坐标位置W(宽)=canvas.width*scaleH(高)=canvas.height*scalex...

canvas图形处理和进阶用法

canvas图形处理和进阶用法

  上一篇博客介绍了canvas基础用法,本文将更进一步,介绍canvas的图形处理和进阶用法 图形变换  图形变换是指用数学方法调整所绘形状的物理属性,其实质是坐标变形。所有的变换都依赖于后台的数学矩阵运算。谈到图形变换,不得不得说的三个基本变换方法就是平移变换:translate(x,y)旋转变换:rot...

canvas基础语法

canvas基础语法

  canvas顾名思义是定义在浏览器中的画布。它不仅是一个普通的元素,更是一个强大的编程工具。它的出现已然超过了web基于文档的设计初衷,将网页这一形态的应用推向了另一个高度。利用canvas,可以开发出复杂的动画、动态图表、游戏等。关于canvas,有这样一句话——canvas就像是一场文艺...