canvas元素 | 易学教程

基于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

convas-html绘制图像基本属性

阅读更多关于 convas-html绘制图像基本属性

<canvas></canvas> 是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。 <canvas></canvas> 只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在 <canvas>> 元素上绘图主要有三步：获取 <canvas> 元素对应的DOM对象，这是一个Canvas对象；调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；调用CanvasRenderingContext2D对象进行绘图。 html中添加 <myCanvas> 标签,标签内无法绘制,必须使用js 设置convas-html绘制图像的基本属性画板 var c=document.getElementById("myCanvas"); 画笔(绘制颜色) var ctx=c.getContext("2d"); 橡皮擦 ctx.clearRect(x, y, w, h); 颜色 ctx.fillStyle="#FF0000"; 填充颜色 ctx.fillRect(0,0,150,75); ctx.stroke(); ctx

前端小功能：canvas签名版

阅读更多关于前端小功能：canvas签名版

canvas签名版。 canvas生成图片保存。 <!doctype html> <html> <head> <meta charset="UTF"> <title>签名版</title> <style> *{margin:0;padding:0;} </style> </head> <body> <div style="margin:20px auto; text-align:center;">签名版</div> <canvas id="canvasbox" width="500" height="250" style="border:1px solid green; margin:20px auto;display:block;"></canvas> <div class="btn" style="margin:0 auto; text-align:center;"> <button id="savebtn">保存</button> <button id="clearbtn">清空</button> </div> <script> var canvasbox = document.getElementById("canvasbox"); var ctx = canvasbox.getContext("2d"); var iscanvas = false; var offsetX

【批注】技术选型 -- 绘图 DrawGraphics

阅读更多关于【批注】技术选型 -- 绘图 DrawGraphics

原文转自：技术选型 -- 绘图 DrawGraphics 作者：雷文宇 Web实现图形方式有3种：纯DOM节点、SVG矢量图和Canvas方式。纯DOM节点这种方式是一个基于旧版本浏览器，非主流Web绘图方式，并且性能不高的。当现主流的实现方式有两种：SVG和Canvas， SVG 矢量DOM节点绘制技术，由于其类似于DOM的工作方式，所有绘制出的图形都是以DOM节点的形态存在的。当图形不复杂并且单位面积内所需要绘制的节点数少的时候，它的效率很高实现代价最小。而 Canvas 是最典型的像素绘制技术，也就是位图(Bitmap)绘制技术。它基础就是通过算法去绘制所有的点，当图形复杂且有堆叠时，它的效率会比较高。值得注意的是，当显示区域越大时，也就是分辨率越大时，它所需要的性能资源也就越多。 SVG是基于盒模型的每一次绘制都有可能改变文档节点之间的关系，不太适用绘制真正的矢量场景。典型的例子就是画布的缩放。使用SVG方式缩放画布，只能改变画布的大小（就是改变画布坐标系单位与标准参考坐标系的比率）。虽然，SVG节点本身不会失真（因为，SVG节点自身是个矢量图）。但SVG内的节点图标，或者其它非矢量元素都会随着自己的参考坐标系变化而失真（所以需要所有节点图标或其他元素作同比例缩放-transform）。即使所有的节点都用矢量图形。也会有一个更严重的问题就是

微信小程序 canvas 使用

阅读更多关于微信小程序 canvas 使用

微信小程序中，canvas使用场景主要是 1. 制作分享图片 (小程序码，自定义文本等) 2. 自定义设计这里主要介绍制作分享图片的流程以及注意点 1. wxml中添加 canvas 标签，设置样式需要设置canvas标签的宽高，canvas-id等基础属性 2. 封装绘制画布的方法 wx.createCanvasContext(string canvasId, Object this) 　　绘制画布好比布局，参考小程序API，进行相应绘制。　　2.1 绘制顺序需要按照显示的层级来。底层内容先绘制　　2.2 带有圆角的背景可以使用 “矩形 + 半圆” 组合，矩形长度可以利用文本长度估算　　2.3 绘制完成调用 draw() 3. 将画布的内容生成图片，并且保存到本地相册　　3.1 将绘制完成的画布调用画布API生成临时图片　　3.2 临时图片保存到相册注意点 1. canvas 是原生组件，所以z-index对其无效。需要在 canvas 显示其他元素可以参考原生组件使用限制 2. 设置 canvas 的显示隐藏不能用 v-if 应该用 hidden 3. canvas 要绘制的图片必须是本地图片，故可将服务器图片下载到本地进行绘制 wx.downloadFile() 4. canvas 绘制使用的单位都是 px 所以设置宽高应该都是 px

将div生成图片并下载下来

阅读更多关于将div生成图片并下载下来

//文件需要引入html2canvas.js、jquery.js function downLoadImg(){ var element = $(".orgchart"); // 这个dom元素是要生成img的div容器 var w = element.outerWidth(); // 设置该容器的宽 var h = element.outerHeight(); // 设置该容器的高var canvas = document.createElement("canvas"); canvas.width = w; // 设置画布宽&&高 canvas.height = h ; var offsetTop = element.offset().top; // 获得该容器的上偏移量 var offsetLeft = element.offset().left; // 获得该容器的左偏移量 var context = canvas.getContext("2d"); context.translate(-offsetLeft, -offsetTop); var opts = { canvas: canvas, width: w, height: h } html2canvas(element, opts).then(function (canvas) { setTimeout

使用 HTML5 canvas 绘制的图形

阅读更多关于使用 HTML5 canvas 绘制的图形

HTML5 是一个新兴标准，它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性，它们都支持现行的 HTML 4.01 版本规范。它还引入了几个新元素和属性，它们适用许多使用 web 页面的领域 — 音频、视频、图形、数据存储、内容呈现，等等。本文主要关注图形方面的增强：canvas。新的 HTML5 canvas 是一个原生 HTML 绘图簿，用于 JavaScript 代码，不使用第三方工具。跨所有 web 浏览器的完整 HTML5 支持还没有完成，但在新兴的支持中，canvas 已经可以在几乎所有现代浏览器上良好运行了，但 Windows® Internet Explorer® 除外。幸运的是，一个解决方案已经出现，将 Internet Explorer 也包含进来。本质上，canvas 元素是一个白板，直到您在它上面 “绘制” 一些可视内容。与拥有各种画笔的艺术家不同，您使用不同的方法在 canvas 上作画。您甚至可以在 canvas 上创建并操作动画，这不是使用画笔和油彩所能够实现的。本文探索新的 HTML canvas 元素，从简单地包含一个 canvas 元素到高级 JavaScript 交互（动画的关键）逐步进行演示。学习如何在一个 web 页面上显示

H5之canvas-绘制动态时钟

阅读更多关于 H5之canvas-绘制动态时钟

使用<canvas>元素不是非常难，但需要一些基本的HTML和JavaScript知识。今天我们来利用canvas API绘制一个时钟，先上图：画图之前，先把思路捋一遍：首先分解一下这个时钟的图形，它是由表盘（圆形）和指针（直线）组成。 canvas中圆形与矩形差距很大，canvas并没有提供专门绘制圆形的方法，但可以绘制圆弧，将圆弧首尾相连得到圆形 arc( x , y , radius , 起始弧度 , 结束弧度 , 旋转方向) x,y --- 圆心坐标 radius --- 半径弧度和角度的关系 --- 弧度 = 角度*Math.PI/180 例：2π是360°(完整的圆形) 旋转方向 --- true:逆时针；false:顺时针(默认) 掌握画圆大法后，就可以着手施工了：首先准备好画布 <canvas id="myClock" width="500" height="500"></canvas> 接着获取上下文对象 var canvas = document.getElementById('myClock'); var con = canvas.getContext('2d'); 分解功能： 1.表盘上的刻度(60个表示秒的刻度，12个表示小时的刻度) 60个秒刻度-->360°/60-->6°一个小格 //定义原点和半径 var x = 250; var y =

canvas画布导出图片并下载

阅读更多关于 canvas画布导出图片并下载

近期在学习关于画布知识，关于画布导出图片，在导出jpeg格式的图片时，会发现图片背景色变成了黑色，原因是画布透明的地方默认转成了黑色    <canvas id="canvas"></canvas> <button class="button-balanced" id="save">转换</button> <a href="" download="canvas_love.jpeg" id="save_herf"> <img src="" id="save_img" alt=""> </a> var c = document.getElementById("canvas"); function drawLove(canvas) { let ctx = canvas.getContext("2d"); ctx.beginPath(); // 背景色转换成白色 ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, c.width, c.height); // ctx

订阅 canvas元素