随笔分类 - canvas
HTML5画布细节总结
摘要：https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形。 在这篇文章中，我将向你介绍 jCanvas，一个基于 jQuery的免费且开源的 HTML5的Canvas API
阅读全文
摘要：原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI，整体风格变得和iOS7一致了。首页图标下方漂浮着若干大小不一的泡泡，十分梦幻。大家可以访问 beta.icloud.com
阅读全文
摘要：这一次我们设置了变量。。。是不是感觉看起来莫名的亲切了 实现canvas以图片中心旋转 利用canvas的roate和translate方法实现按中心旋转的效果 新建html页 定义画布，以及图案的位置和大小参数 obj.x/y为长方形在canvas中的位置 obj.width/height为长方形
阅读全文
摘要：canvas剪裁图片并上传，前端一步到位，无需用到后端 背景： 当前主流的图片剪裁主要有两种实现方式。 1：flash操作剪裁。2：利用js和dom操作剪裁。 目前看来这个剪裁主要还是先通过前端上传图片到服务器，然后前端操作后把一些坐标和大小数据传到后台， 然后后台来执行剪裁。我一直觉得这样有很多问
阅读全文
摘要：HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。 如果画布的高度或宽度是0，那么会返回字符串“data:,”。 如果传入的类型非“image/png”，但是返回
阅读全文
摘要：【已知】canvas提供了toDataURL的接口，可以方便的将canvas画布转化成base64编码的image。目前支持的最好的是png格式，jpeg格式的现代浏览器基本也支持，但是支持的不是很好。 【想要的】往往这么简单直接的接口通常都满足不了需求。我想要的不仅是简单的通过画布生成一个png，
阅读全文
摘要：定义和用法 font 属性设置或返回画布上文本内容的当前字体属性。 font 属性使用的语法与 CSS font 属性 相同。 属性值 normal italic oblique normal small-caps normal bold bolder lighter 100 200 300 400
阅读全文
摘要：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset CanvasRenderingContext2D.lineDashOffset 是 Canvas 2D API 设置虚线偏
阅读全文
摘要：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled 这是一个实验中的功能此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由
阅读全文
摘要：1. 图形变换 canvas是基于状态绘制图形的。故此一般情况下，canvas的绘制的图形路径和状态时分离的。 在填充或绘制之前可以调用一些状态或者图形变换的来设置当前绘制图形的状态。 这里所说的图形变换大致指的就是： 1> 位移 translate(x,y) : 将canvas画布进行位移显示。将
阅读全文
摘要：1. lineWidth 线条宽度 ( 示例： lineWidth = 10 ) 2. lineCap 线条帽(线条两端的形状) ( 示例： lineCap = butt(default) | round(圆头) | square(方头) ) 3. lineJoin 线条连接形状 ( 示例： lin
阅读全文
摘要：1. 理解canvas canvas其实是HTML5中一个新增加的标签，对于canvas标签本身并没有什么非常强大的属性（width、height、id、class、style），仅仅作为一个画布存在，只能使用js获取canvas绘图上下文环境（也就是获取CanvasRenderingContext
阅读全文
