51Dev开发社区
登录 注册

#Canvas

canvas与工作流的不解之缘
  html的标签 <canvas>用于图形的绘制，通过脚本(通常是JavaScript)来完成，canvas简而言之就是个画布。上一篇文章我们提到工作流的一个重要组成部分：流程建模，也就是流程图；啥也不说，咱先看个效果： 上面这个就是用canvas绘制的流程图，流程...
代码星球 ·2020-04-06

自己定义View时，用到Paint Canvas的一些温故，简单的帧动画（动画一 ，&quot;掏粪男孩Gif&quot;顺便再提提onWindowFocusChanged）
转载请注明出处：王亟亟的大牛之路之前在绘画的过程中提到了静态的旋转啊，缩放啊，平移等一些效果。那么自己定义的View当然也有动态的效果也就是我们的Animation。经常使用的有三种ViewAnimationDrawableAnimationPropertyAnimation这一篇讲一下简单的DrawableAnima...
代码星球 ·2020-04-06

【html5】HTML5中canvas怎样画虚线
在canvasAPI中,我们发现仅仅提供了画实线的方法实现,并没有虚线的相关方法,那么怎样实现画虚线呢?现实中,虚线是由一小段小段的实线线段组成,那么仅仅要我们通过画出等长度的线段就能够组成我们想要的虚线.以下我们就能够依据上面的原理来实现虚线的画法.例如以下:varcontext=document.getElemen...
代码星球 ·2020-04-06

Canvas 和 SVG 的不同
Canvas和SVG都允许您在浏览器中创建图形，但是它们在根本上是不同的。下表列出了canvas与SVG之间的一些不同之处。Canvas依赖分辨率不支持事件处理器弱的文本渲染能力能够以.png或.jpg格式保存结果图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘SVG不依赖分辨率支持事件处理器最适合带有大型渲染区...
代码星球 ·2020-04-06

Canvas 旋转风车绘制
 写在前面：　　 亲爱的朋友们大家好，鄙人自学前端，第一次写博客，写的不好的地方，烦请同学们谅解，如果本文对你有一丁点帮助，还请劳驾您给我点个赞，您的认可将是我坚持下去的强大动力！谢谢！ 　　　在进行教学之前，我想聪明的你已经掌握了基本的Canvas基本操作方法，如果对Canvas还不是很...
代码星球 ·2020-04-05

用canvas画会旋转的伞
这个例子是我在网上看到，然后仿写的。主要用到canvas画图。首先，需要在页面上创建一个画布<canvasid="mycanvas"width="1200"height="600"></canvas>ViewCode现在来开始画图：先给出用到的参数：varctx;varupdown;//上下移动...
代码星球 ·2020-04-05

canvas图像处理汇总
canvas自从出来了之后，在前端的图像处理上面提供了各种各样的遍历，虽然很多的操作其实都是要应用到算法的，但是这个也给前端提供了很多的可能性，其中最终要的一个canvas函数（至少我认为）就是getImageData,这个函数可以提取图像每个像素的RGBA值。因为有这个函数所有才有丰富多彩的canvas图像处理。&n...
代码星球 ·2020-04-05

使用html2canvas在手机端独立实现h5页面转图片
方便用户把每日消息的海报图片分享到微信朋友圈进行消息扩散使用html2canvas插件，html2canvas1.0.0-alpha.11 ，github地址：https://github.com/niklasvh/html2canvas　　官网：https://html2canvas.hertzen.com...
代码星球 ·2020-04-05

微信小程序 canvas 内容（宽高） 兼容不同机型
 此功能并没有做所有机型测试，后面会一个一个做一下，如需使用请先自作测试！canvas在小程序中设定的尺寸默认是px并不是rpx的所以需要转换一下PS：设计稿是750像素wx.getSystemInfo({success:function(res){varv=750/res.windowWidth;//设计稿...
代码星球 ·2020-04-04

Canvas锯齿问题
canvas的宽高必须通过HTML属性指定，不能通过CSS指定，否则会有锯齿这个是通过CSS定义宽高，绘制的图形 #myCanvas{background:black;height:800px;width:800px;} 这个是通过HTML属性设置的宽高<canvasid="myCanvas"...
代码星球 ·2020-04-04

canvas时钟
<!DOCTYPEhtml><htmllang="en"><head>   <metacharset="UTF-8">   <metaname="viewport"content="width=device...
代码星球 ·2020-04-04

CreateJS结合Falsh工具生成Canvas动画（加密字符串的由来）
CreateJS是一款制作Canvas动画的工具。官网如下：http://www.createjs.com/http://www.createjs.cc/使用CreateJS时最大的疑问就是JS上的加密字符串是如何来的，比如：其实这个加密字符串是由Flash自动生成的，也就是说整个JS文件自动生成出来的。可以参考以下文...
代码星球 ·2020-04-04

canvas移动端常用技巧图片loading
核心知识点：drawImage作用：将图片加载在canvashtml:<canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">Yourbrowserdoesnotsupportthecanvaselement.&l...
代码星球 ·2020-04-02

Canvas和SVG的比较
Canvas和SVG都允许您在浏览器中创建图形，但是它们在根本上是不同的。SVG是一种使用XML描述2D图形的语言。SVG基于XML，这意味着SVGDOM中的每个元素都是可用的。您可以为某个元素附加JavaScript事件处理器。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动...
代码星球 ·2020-03-29

HTML5中canvas与SVG有什么区别
SVGSVG是一种使用XML描述2D图形的语言，它基于XML也就是我们可以为某个元素附加JavaScript事件处理器，如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。CanvasCanvas通过JavaScript来绘制2D图形。它是逐像素进行渲染的，一旦图形被绘制完成，如果它的位置发生了变化，那么整个场景...
代码星球 ·2020-03-29
首页上一页...678910下一页尾页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他