- 综合排序
- 最热优先
- 最新优先
- 来自专栏LeoXu的博客
oCanvas 教程学习摘要（二） 转
1、Core Core是在全局的oCanvas对象上使用create()方法创建出来的 oCanva Core 实体。 width : Number，像素格式的canvas宽度 id : Number，它是核心实体在全局的oCanvas对象中的ID. oCanvas.canvasList 是所有实体的一个数组, 而这里的 settings : Object，控制oCanvas如何工作的设置属性对象. 注意：只能在oCanvas.create()方法的settings参数中指定. 这个方法首先会重置核心实体，然后移除所有的DOM事件处理器，并将其从oCanvas.canvasList列表中移除。
48120发布于 2018-08-15 - 来自专栏LeoXu的博客
oCanvas 教程学习摘要（一） 转
1、oCanvas对象 oCanvas 是一个全局对象，包含了所有的模块，以及核心的构造器和一些其它的方法。 2、create(settings) create 方法被用来设置一个核心实体，核心实体是每个oCanvas对象都需要的，所以调用create方法就能保证你能访问到核心实体。 示例： oCanvas.domReady(function () { var canvas = oCanvas.create({ canvas: "#canvas", (obj_1, obj_2); output("obj_1: ", obj_1); oCanvas.extend(obj_3, obj_2); output("obj_3: ", obj_3); var 示例： var constructor = function (settings, core) { return oCanvas.extend({ core: core,
64630发布于 2018-08-15 - 来自专栏杨焱的专栏
oCanvas 一款以对象的方式操作canvas
oCanvas changes the way you work with the canvas element. This is what oCanvas is made to do — create a bridge between the native API and the way you want to work If you would want to access the native API, that is also possible. http://ocanvas.org/docs 例子代码： <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>oCanvas Demo</title> <script src ="<em>ocanvas</em>-2.7.4.min.js"></script> <style type="text/css"> </style> </head> <body> <canvas id="c1
35630编辑于 2021-12-08 - 来自专栏landv
[OHIF-Viewers]医疗数字阅片-医学影像-querySelector() 选择器语法-将画布(canvas)图像保存成本地图片的方法
var strDataURI = oCanvas.toDataURL(); // returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt (oCanvas); // 这将会提示用户保存JPG图片 Canvas2Image.saveAsBMP(oCanvas); // 这将会提示用户保存BMP图片 // 返回一个包含PNG图片的<img (oCanvas, true); // 返回一个包含BMP图片的
元素 var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true); // 这些函数都可以接受高度和宽度的参数 // 可以用来调整图片大小 // 把画布保存成100x100 的png格式 Canvas2Image.saveAsPNG(oCanvas, false, 100, 100); 你也许注意到了saveAsBMP这个函数，实际上没有浏览器直接支持转化成BMP格式，但我们可以借用
1.3K20发布于 2020-07-13 - 来自专栏用户7873631的专栏
Canvas 文本样式
固定语法，宽度800 高度600--> </canvas> <script type="text/javascript"> window.onload=function() { var oCanvas =document.querySelector("#myCanvas");//获取canvas对象 width=oCanvas.width;//获取canvas的宽度 oGc=oCanvas.getContext
43630编辑于 2022-08-15 - 来自专栏用户7873631的专栏
Canvas 画画坐标系
--固定语法，宽度800 高度600--> </canvas> <script type="text/javascript"> window.onload=function() { var oCanvas =document.querySelector("#myCanvas");//获取canvas对象 oGc=oCanvas.getContext('2d');//类型2d width=oCanvas.width ;//获取canvas的宽度 height=oCanvas.height;//获取canvas的高度 function drawGrid(color,stepX,stepY) { oGc.beginPath
98420编辑于 2022-08-15 - 来自专栏用户7873631的专栏
Canvas arcTo用法
--固定语法，宽度800 高度600--> </canvas> <script type="text/javascript"> window.onload=function() { var oCanvas =document.querySelector("#myCanvas");//获取canvas对象 oGc=oCanvas.getContext('2d');//类型2d var x1=50,
43320编辑于 2022-08-15 - 来自专栏用户7873631的专栏
Canvas 简单画个Z字母
--固定语法，宽度800 高度600--> </canvas> <script type="text/javascript"> window.onload=function() { var oCanvas =document.querySelector("#myCanvas");//获取canvas对象 oGc=oCanvas.getContext('2d');//类型2d oGc.beginPath
47020编辑于 2022-08-15 - 来自专栏四火的唠叨
用 JavaScript 截图
Canvas2Image 它的原理是利用了 HTML5 的 canvas 对象提供了 toDataURL() 的 API： var strDataURI = oCanvas.toDataURL(); returns an
element containing the converted PNG image var oImgPNG = Canvas2Image.saveAsPNG(oCanvas , true); 但是如果你做一个 JavaScript 截图功能的话，你可能希望截图后能够自动打开保存文件的 “保存” 对话框： Canvas2Image.saveAsPNG(oCanvas
1.5K10编辑于 2022-07-15 - 来自专栏IMWeb前端团队
利用canvas实现一个抠图小工具
drawImage 将图片绘制到画布上 getImageData 获得一个包含画布场景像素数据的ImageData对像 putImageData 像素数据的写入 // canvas实例 const oCanvas document.getElementById('my-canvas'); // 上面读取资源的操作后，将图像画到canvas上 function onImageLoad(img) { const width = oCanvas.width = img.naturalWidth || img.width; const height = oCanvas.height = img.naturalHeight || img.height ; const ctx = oCanvas.getContext("2d"); ctx.drawImage(img, 0, 0); // 获取画布像素信息 const document.getElementById('download'); // 从画布上读取数据并保存到本地 function setDownLoad(fileName) { const url = oCanvas.toDataURL
3K50发布于 2017-12-29 - 来自专栏用户7873631的专栏
canvas绘制坐标系
let oCanvas = document.querySelector("canvas"); 第一步：拿到canvas对象 let oCtx = oCanvas.getContext("2d"); style> </head> <body> <canvas width="500" height="400"></canvas> <script> // 1.拿到canvas let oCanvas = document.querySelector("canvas"); // 2.从canvas中拿到绘图工具 let oCtx = oCanvas.getContext("2d");
71820发布于 2021-03-18 - 来自专栏用户7873631的专栏
Canvas画个饼图
又返回三点看成360度 var oCanvas=document.querySelector('canvas');//获取canvas对象 oGc=oCanvas.getContext('2d'
1.8K20编辑于 2022-08-15 - 来自专栏工厂程序员
HTML页面导出PDF——高清版
contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); // var oCanvas = document.getElementById("print"); // Canvas2Image.saveAsJPEG(oCanvas);
2.6K30发布于 2019-09-10 - 来自专栏用户7873631的专栏
canvas绘制表格
let oCanvas = document.querySelector("canvas"); 第一步：拿到canvas对象 let oCtx = oCanvas.getContext("2d");
2.4K20发布于 2021-03-18 - 来自专栏网站教程
20个最新的 CSS3 和 HTML5 工具
14.oCanvas oCanvas 可以帮助你很容易的在 HTML5 的 Canvas 标签上创建对象，并且创建这些对象的动画。
1.1K30发布于 2021-07-16 - 来自专栏前端说吧
Html2canvas - 微信中长按存图 - 将h5活动结果保存到本地
8947062.html) 这里我直接调用基于html2canvas封装好的html2img方法： 1. html2canvas生成截图 ```js html2img({ targetEleId: oCanvas
4.2K31发布于 2018-08-21 - 来自专栏机器学习AI算法工程
【深度学习项目】打开摄像头拍照，并做图片识别
3.1、获取canvas图像的base64（核心代码） // base64的长度在8000以上 var base64 = oCanvas.toDataURL(); 3.2、后台获取base64字符串 需要注意的是
4.2K30发布于 2019-10-28 - 来自专栏JowayYoung谈前端
npm依赖(类库工具)
d3: 图表 fabric: SVG和Canvas转换器 flv: 视频 font-awesome: 字体图标 gwm: 水印 highcharts: 图表 html2canvas: Canvas截图 ocanvas
2.9K20发布于 2020-04-01 - 来自专栏JavaScript全栈
你必须掌握的可视化大屏开发模式
部分需求需要使用偏底层技术实现，一般用到的技术点如下： CSS3 SVG Canvas WebGL 我们也可以使用半成品进行定制，SVG相关：SVG.js、snap，Canvas 2D有：zrender、ocanvas
1.9K21发布于 2020-07-20
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号