canvas元素 | 易学教程

HTML 学习笔记 (canvas 基础)

阅读更多关于 HTML 学习笔记 (canvas 基础)

1.什么是Canvas canvas就是一个画布，可以进行画任何的线，图形，填充等一系列操作。这一切都是用Js操作的，另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。创建canvas标签  <canvas id="myCanvas"></canvas> 上面的标签只是一个画布，Id属性是必须的，后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvase的Dom对象就可以获取他的上下文了，Canvas绘制图形都是靠着Canvas对象的上下文对象. var myCanvas; window.onload = function() { myCanvas = document.getElementById("myCanvas"); //获取上下文 var context = myCanvas.getContext("2d"); } Context默认的有两种绘制模式：第一种绘制线(stroke) 第二种填充(fill) 使用canvas 画一个 Canvas绘制的总体的步骤创建HTML页面，设置画布标签编写js，获取画布dom对象通过Canvas标签的Dom对象获取上下文设置绘制线样式、颜色绘制矩形，或者填充矩形使用canvas绘制矩形 <body> <!--创建canvas元素

图片转base64格式

阅读更多关于图片转base64格式

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> function getImageBase64(img, ext) { var canvas = document.createElement("canvas"); //创建canvas DOM元素，并设置其宽高和图片一样 canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); //使用画布画图 var dataURL = canvas.toDataURL("image/" + ext); //返回的是一串Base64编码的URL并指定格式 canvas = null; //释放 return dataURL; } var user_icon = document.getElementById('imglogo1'),base64;//获取图片 base64 = getImageBase64(user_icon, user_icon.src); //base64编码 console.log(base64) 来源： oschina 链接： https://my.oschina.net

Canvas 和 SVG 对比

阅读更多关于 Canvas 和 SVG 对比

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。首先canvas是html5提供的新元素<canvas>，而svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。在H5中看似canvas与svg很像，但是，他们有巨大的差别。 SVG： SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 Canvas： Canvas 通过 JavaScript 来绘制 2D 图形。 Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象 Canvas 与 SVG 的比较下表列出了 canvas 与 SVG 之间的一些不同之处。 Canvas 依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏

小程序Canvas性能优化实战

阅读更多关于小程序Canvas性能优化实战

以下内容转载自totoro的文章《小程序Canvas性能优化实战！》作者：totoro 链接： https://blog.totoroxiao.com/canvas-perf-mini/ 来源： https://blog.totoroxiao.com/ 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。腾讯位置服务基于微信提供的小程序插件能力，专注于（围绕）地图功能，打造一系列小程序插件，可以帮助开发者简单、快速的构建小程序，是您实现地图功能的最佳伙伴。目前微信小程序插件提供路线规划、地铁图、地图选点等服务！案例背景需求：在小程序中使用canvas组件绘制地铁图，地铁图包括地铁线路、站点图标、线及站点名称文字，绘制元素为线、圆、图片、文字。支持拖动平移和双指缩放。问题：小程序中的canvas性能有限，特别在交互的过程中不断触发重绘会引发严重卡顿。基本实现在不考虑优化的情况下，先说说如何实现绘制和交互。数据格式首先看看数据，服务返回的数据中每个元素都是独立的，包括该元素的样式及坐标 // 线路数据 lineData = { path: [x0, y0, x1, y1, ...], strokeColor, strokeWidth } // 站点数据：分为普通站点和换乘站点 // 普通站点绘制简单圆形 stationData = { x,

小程序Canvas性能优化实战

阅读更多关于小程序Canvas性能优化实战

小程序Canvas性能优化实战

阅读更多关于小程序Canvas性能优化实战

关于canvas绘制图像模糊问题

阅读更多关于关于canvas绘制图像模糊问题

前段时间在做项目的裁剪并上传图像功能的时候，发现裁剪后展示的图像比较模糊，之后去百度上搜索了一下，看到有一个解决方案是设置canvas的宽高为css宽高的3倍，使用后感觉效果很好，当时就没管原理接着做功能去了。在昨天，我想试试做一个鼠标划入图片，图片已鼠标为中心，部分区域放大的demo（类似淘宝商品展示页面的那种）。在制作过程中，我又遇到了canvas转图片模糊的问题，因为当时在解决上个的问题的时候使用了谷歌搜索问题，便又用谷歌搜索了一下（当时忘了刚解决过同样的问题），发现出现这个问题的的原因在于当前显示设备的物理分辨率与CSS分辨率不同，这两个分辨率的比值可在JS中使用 window.devicePixelRatio 获取，该属性返回一个当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例：即一个CSS像素的大小相对于一个物理像素的大小的比值。在获取这个属性的值后，对canvas的宽高进行对应的缩放就可以得到不会模糊的图片啦。这是示例代码： // img为用于展示canvas绘图结果的img元素 const img = document.querySelector('#img'); // 创建canvas const canvas = document.createElement('canvas'); const ctx = canvas

vue中html转pdf并下载功能

阅读更多关于 vue中html转pdf并下载功能

/* eslint-disable */ //不使用JQuery版的 import html2canvas from 'html2canvas'; import JsPDF from 'jspdf'; /** * @param ele 要生成 pdf 的DOM元素（容器） * @param padfName PDF文件生成后的文件名字 * */ function downloadPDF(ele, pdfName) { window.scrollTo(0, 0); let eleW = ele.offsetWidth;// 获得该容器的宽 let eleH = ele.offsetHeight;// 获得该容器的高 let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离 let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离 var canvas = document.createElement("canvas"); var abs = 0; let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条） let win_out = window

【30分钟学完】canvas动画|游戏基础(2)：从零开始画画

阅读更多关于【30分钟学完】canvas动画|游戏基础(2)：从零开始画画

前言上篇主要是理论的概述，本篇会多些实践，来讲讲canvas的基础用法，并包含一些基础三角函数的应用，推荐没有canvas基础的朋友阅读，熟悉的朋友可以跳过。本人能力有限，欢迎牛人共同讨论，批评指正。一起来画画吧 canvas的API有很多，如果一一列举30分钟你是绝对看不完的，而且怎么流水账还不如自己去看文档呢（笑），本教程的思路是用实例一步一步从无到有讲解基础用法。 canvas相关文档准备工作布置画布：通过添加 <canvas> 标签，添加canvas元素；获取画布：通过 <canvas> 标签的id，获得canvas对象；获得画笔：通过canvas对象的getContext("2d")方法，获得2D环境。 <canvas id="canvas" width="400" height="400"></canvas> const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); 画个箭头首先我们来画个红边黄底的箭头，使用面向对象的代码组织方式，全部代码如下。类名为Arrow。它拥有x轴坐标、y轴坐标、底的颜色color、旋转弧度rotation四个属性。实例方法是draw()，它需要一个context对象作为参数

基于canvas实现的高性能、跨平台的股票图表库--clchart

阅读更多关于基于canvas实现的高性能、跨平台的股票图表库--clchart

什么是 ClChart？ ClChart 是一个基于canvas创建的简单、高性能和跨平台的股票数据可视化开源项目。支持PC、webApp以及 React Native 和 Weex 等平台。在 React Native 和 Weex 上完全适配开源项目 GCanvas ，可轻松使用 GCanvas 来使得您开发的应用在android和ios上具有原生绘图的能力。为什么需要ClChart 在现有的开源库中，不乏有非常不错的开源图表库，通用图表库有 chartjs , echart , highchart 等,这些图表库具有非常完备的图表类型以及强大的绘图能力及速度，但由于这些项目需要有通用性，在绘制有价证劵交易图时我们需要进行拓展是比较南。而针对股票等有价证劵特定的图表库有： techanjs 和 highcharts/highstock 等项目，这些图表库对股票绘图已经做了一些非常专业的处理及优化了，但是他们均基于 svg 来绘图。我们在绘制大量数据图表以及处理跨平台时会存在性能问题，以下为我们在使用过程中对各画图库在绘制股票类型的K线图做的一个比较以下所做的比较均为使用这些图表库来绘制有价证劵类型的K线图的绘图能力的比较,数据为主观经验判定 chartjs echart techanjs highchart clchart 绘图元素 canvas canvas & svg

订阅 canvas元素