canvas

初识canvas

阅读更多关于初识canvas

· Canvas的基本用法 · <canvas> 标签只有两个属性—— width和height，canvas会初始化宽度为300像素和高度为150像素 · getContext()方法是用来获得渲染上下文和它的绘画功能 · <canvas>默认的是inline,所以如果要利用margin居中，就必须设置width和block · 绘制矩形： fillRect(x, y, width, height) 绘制一个填充的矩形 strokeRect(x, y, width, height) 绘制一个矩形的边框 clearRect(x, y, width, height) 清除指定矩形区域，让清除部分完全透明。 · 绘制路径： beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。 closePath() 闭合路径之后图形绘制命令又重新指向到上下文中。 stroke() 通过线条来绘制图形轮廓。 fill() 通过填充路径的内容区域生成实心的图形。 · 移动笔触：moveTo(x, y) 将笔触移动到指定的坐标x以及y上 · 绘制直线路径：lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线 · 绘制圆弧路径： arc(x, y, radius, startAngle, endAngle, anticlockwise) 画一个以（x,y

HTML5 Canvas 2D绘图

阅读更多关于 HTML5 Canvas 2D绘图

为了防止无良网站的爬虫抓取文章，特此标识，转载请注明文章出处。LaplaceDemon/ShiJiaqi。 http://www.cnblogs.com/shijiaqi1066/p/4851774.html Canvas Canvas标签，用于在web中绘制各种图形。Canvas为基于像素的绘图，绘制的图像是位图。也即Canvas绘图的基本单位是像素。Canvas是一个相当于画板的html节点，用js操作绘图。 Canvas特点依赖分辨率。不支持事件处理器。弱的文本渲染能力。能够以 .png 或 .jpg 格式保存结果图像。最适合图像密集型的游戏，其中的许多对象会被频繁重绘。一、Canvas基础若浏览器不支持HTML5的 <canvas>标签。则把不支持信息写在<canvas></canvas>之间。例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="myCanvas" width="600" height="300"> 你的浏览器还不支持哦 </canvas> </body> </html> 不建议使用CSS来制定canvas的width，height。因为canvas不光需要指定其dom的宽高

阅读更多关于 canvas

用于绘制图像本身没有绘制能力您必须使用脚本来完成绘图任务 getcontext（）可以返回一个对象颜色、样式和阴影 fillStyle ，设置或返回用于填充绘画的颜色、渐变或模式 strokeStyle 设置或返回用于笔触的颜色、渐变或模式 shadowColor 设置或返回用于阴影的颜色 shadowBlur 设置或返回用于阴影的模糊级别 shadowOffsetX 设置或返回阴影距形状的水平距离 shadowOffsetY 设置或返回阴影距形状的垂直距离 createLinearGradient() 创建线性渐变（用在画布内容上） createPattern() 在指定的方向上重复指定的元素 createRadialGradient() 创建放射状/环形的渐变（用在画布内容上） addColorStop() 规定渐变对象中的颜色和停止位置线条样式属性描述 lineCap 设置或返回线条的结束端点样式 lineJoin 设置或返回两条线相交时，所创建的拐角类型 lineWidth 设置或返回当前的线条宽度 miterLimit 设置或返回最大斜接长度矩形方法描述 rect() 创建矩形 fillRect() 绘制“被填充”的矩形 strokeRect() 绘制矩形（无填充） clearRect() 在给定的矩形内清除指定的像素来源： https://www

Canvas 实现绘制图表

阅读更多关于 Canvas 实现绘制图表

这里用canvas实现了两个简单的图表，用到了canvas的基本用法，效果如下新建 chart.js 文件，封装绘制方法构造方法 function myChart(config){ this.width = config.width > 300 ? config.width : 200 //图表宽度 this.height = config.height > 200 ? config.height : 200 //图表高度 this.el = config.el //容器DOM元素 this.data = config.data //数据 this.title = config.title //title this.type = config.type //类型 line、pie } 初始化方法 init: function(){ this.canvas = document.createElement('canvas') this.canvas.width = this.width this.canvas.height = this.height document.querySelector(this.el).append(this.canvas) this.ctx = this.canvas.getContext('2d') switch(this.type){ case

canvas学习笔记

阅读更多关于 canvas学习笔记

决定把触角伸入canvas领域，但canvas还没有怎么熟，边学边构建，把重复烦锁的劳动部分统统转化API。 */ /*--> */ $1.require("ready,draw20120519",function(){ var $ = $1; //画一个黑色的矩形 var context = $("#canvas1").context2D(); context.fillRect(0, 0, 150, 100); //画一个蓝色的矩形 var context = $("#canvas2").context2D(); context.fillStyle = '#00f'; context.fillRect(0, 0, 150, 100); var context = $("#canvas3").context2D(); context.fillStyle = '#00f'; // 设定填空颜色 context.strokeStyle = '#f00'; // 设定轮廓颜色 context.lineWidth = 4; // 设定轮廓的厚度 //画许多矩形 context.fillRect (0, 0, 150, 50);//画一个实心矩形 context.strokeRect(0, 60, 150, 50);//画一个空心矩形 context.clearRect (30, 25,

CANVAS笔记

阅读更多关于 CANVAS笔记

bglayer.add(bgimage) /* 后面的层会覆盖前面的，所以要放在上面的，就要后面才添加！*/ bglayer.add(this.shape1) Layer.destroy() layer.add(bar) 这种添加方式只能用于当bar是konva创建的对象时构造函数首字母大写 Konva获取值要加括号，如item.angle() data.forEach(function(item,index){ group. find (".rect") Konva支持许多jquery的方法和事件！ ØtoDataURL() 把canvas绘制的内容输出成base64内容。 Ø语法：canvas.toDataURL(type, encoderOptions); n type：设置输出的类型，比如 image/png image/jpeg等 nencoderOptions： 0-1之间的数字，用于标识输出图片的质量，1表示无损压缩，类型为： image/jpeg 或者image/webp才起作用。如果以后做canvas游戏方向开发深入学习可以扩展内以下容： ØsetTransform() 将当前转换重置为单位矩阵。然后运行 transform() Øtransform() 替换绘图的当前转换矩阵 ØglobalCompositeOperation

第二阶段冲刺（九）

阅读更多关于第二阶段冲刺（九）

昨天学习了有关九宫格登录功能遇到的困难是不知道怎么动态添加内容或变更格数今天准备对程序普查，查找bug。 package com.example.liuan.jiugongge; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Point; import android.text.TextUtils; import android.util.AttributeSet; import android.util.TypedValue; import android.view.MotionEvent; import android.view.View; import java.util.ArrayList; import java.util.List; /** * 图案解锁 * Name: LockPatternView * Author: liuan * creatTime:2017-01-11 20:45 */ public class LockPatternView extends View { // 正常状态的颜色 private static final int SELECTED

Canvas与SVG的区别

阅读更多关于 Canvas与SVG的区别

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是有不同的什么是Canvas 通过Javascript来绘制2D图形。是逐像素进行渲染的。其位置发生改变，会重新进行绘制什么是SVG SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。 SVG 用来定义用于网络的基于矢量的图形。 SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。 SVG 是万维网联盟的标准。 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。如果在canvas上绑定事件，是绑定在整个画布上如果在SVG里绑定事件，SVG里面的标签相当于一个dom元素，可以在里面添加事件两者的区别： Canvas 依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘 SVG 不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用来源： https://www.cnblogs.com/conlover/p/11225900.html

PDF.js实现个性化PDF渲染（文本复制）

阅读更多关于 PDF.js实现个性化PDF渲染（文本复制）

原文链接: https://segmentfault.com/a/1190000016963084 前不久，产品经理提出要在界面上优雅地展示PDF文档，当即就有了两种实现方式：实现方式一使用 embed 标记来使用浏览器自带的pdf工具。这种实现方式优缺点都很明显：优点：自带“打印”，“搜索”，“翻页”等功能，强大且实现方便。缺点：不同浏览器的pdf工具样式不一，且无法满足个性化需求，比如：禁止打印，下载等。我们的产品经理是挑剔的 😒，于是... 实现方式二使用Mozilla的 PDF.js ，自定义展示PDF。下面我们就细致讲述一下使用 PDF.js 过程中遇到的问题。主要包括：基础功能集成使用 Text-Layers 渲染什么是PDF.JS PDF.js是基于HTML5技术构建的，用于展示可移植文档格式的文件(PDF)，它可以在现代浏览器中使用且无需安装任何第三方插件。基础功能集成 1️⃣引用首先，引用 PDF.js 就遇到了问题，官网中提到通过CDN引用或者下载源码至本地。而我们并不想污染我们的 index.html 并且希望可以对每一个引用的框架有统一的版本管理。于是，我们搜寻到一个包：pdfjs-dist。通过 npm install pdfjs-dist ，我们引入了PDF.js。基础功能有两个必须引用的文件： pdf.js pdf

Add little lines in fabric js selection controls

阅读更多关于 Add little lines in fabric js selection controls

问题 When you have a canvas element set to hasControls little controls render when the user clicks the element. These controls are little canvas squares. I would like to overlay little lines on the square controls to give a further polish to look and feel. 回答1: override fabric Object _drawControl function: fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top) { if (!this.isControlVisible(control)) { return; } var size = this.cornerSize; this.transparentCorners || ctx

订阅 canvas