写点什么

canvas

0 人感兴趣 · 47 次引用

  • 最新
  • 推荐
https://static001.geekbang.org/infoq/08/08fb47a71c01d63737715295d2c812c7.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

canvas- 绘制一个柱状图

最近也是在学习canvas,跟着绘制了一个最基本柱状图,canvas是一个基于HTML5的绘图标准,提供了一系列的API可以用来绘制图形,包括直线、矩形、圆形、文本等等。我介绍如何使用canvas绘制简单的柱状图,并优化技巧,使得代码更加高效

https://static001.geekbang.org/infoq/7c/7cc6839c67d9d1da1bae6bf27685bc0c.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

课程作业及比赛任务,已支持 Notebook 内直接提交|ModelWhale 版本更新

ModelWhale 将编程建模、模型训练、数据&算力管理等功能深度整合,通过逐级开放的基础设施,与 Jupyter Notebook 交互式、Canvas 低代码拖拽式、CloudIDE 三种即开即用的云分析环境,为研究者团队解决数据安全应用、底层工程繁复、研究成果流转困难等问题。

https://static001.geekbang.org/infoq/1e/1e680efe85b3b98cc9dbc02a415dc6e3.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Canvas 拖拉拽建模工具,支持排序导出 Notebook 内容|ModelWhale 版本更新

用户头像
ModelWhale
2022-11-08

ModelWhale 将编程建模、模型训练、数据&算力管理等功能深度整合,通过逐级开放的基础设施,与 Jupyter Notebook 交互式、Canvas 低代码拖拽式、CloudIDE 三种即开即用的云分析环境,为研究者团队解决数据安全应用、底层工程繁复、研究成果流转困难等问题。

https://static001.geekbang.org/infoq/2d/2d82fa25582eb394d43e4124504e8f7b.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

“程”风破浪的开发者|微信小程序生成海报图片导出相册

用户头像
江拥羡橙
2022-10-28

微信小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景

https://static001.geekbang.org/infoq/20/205673448315fa535ff174f67b0cbfcb.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

前端必读:如何在 JavaScript 中使用 SpreadJS 导入和导出 Excel 文件

JavaScript在前端领域占据着绝对的统治地位,目前更是从浏览器到服务端,移动端,嵌入式,几乎所有的所有的应用领域都可以使用它。技术圈有一句很经典的话“凡是能用JavaScript实现的东西,最后都会用JavaScript实现”。Excel 电子表格自 1980 年代以来一直为

https://static001.geekbang.org/infoq/78/78ac3b5245817221f15ce35128ee1a05.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

如何写成高性能的代码(一):巧用 Canvas 绘制电子表格

Canvas是HTML5的标签,是HTML5的一种新特性,又称画板。顾名思义,我们可以将其理解为一块画布,支持在上面绘制矩形、圆形等图形或logo等。需要注意的是,与其他标签不同,Canvas只是一块空画布,其本身是不能绘制图形的,必须通过JavaScript 脚本进行绘制。

https://static001.geekbang.org/infoq/55/551a517aabd8122b64eb3150fc65cb60.webp?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

canvas

用户头像
Jason199
2022-08-10

 canvas: 一般指得是 Html5 标准里面得一个标签

https://static001.geekbang.org/infoq/2f/2f1076eccfc3a4ac4156831ecccba57b.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

酷炫一款动态背景 + 鼠标点击效果(HTML +js canvas)

用户头像
Five
2022-08-05

之前用于装饰个人的Hexo博客背景和点击事件,于是动手弄弄顺便学习学习,现在分享出来给有需要的人。

https://static001.geekbang.org/infoq/af/afec2afa2631a120eafa2994de86a7b5.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 笔刷到底怎么用?

用户头像
德育处主任
2022-06-28

Fabric.js提供了几种笔刷工具,但如果你学会基础笔刷如何使用和配置,要再学其他笔刷会更加得心应手。本文就带你了解基础笔刷到底如何使用~

https://static001.geekbang.org/infoq/92/9237fe8d18ec6200a8d8ac81d20fd5b5.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 上划线、中划线(删除线)、下划线

用户头像
德育处主任
2022-06-26

下划线、删除线、上划线都是文本编辑工具常用的操作。Fabric.js当然也在自己的文本组件里提供这类操作啦

https://static001.geekbang.org/infoq/69/691dca0dc7dadb33bd36d531fc46a70f.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 手动加粗文本 iText

用户头像
德育处主任
2022-06-23

本文介绍 Fabric.js 的 IText 在画布上如何让用户手动加粗文本。 要实现2种操作:全文加粗、只加粗选中的文字

https://static001.geekbang.org/infoq/c0/c07d01d2464bcb36e45681ef42c0278d.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js IText 手动设置斜体 🎋

用户头像
德育处主任
2022-06-22

🎋 不管是在富文本编辑器还是在Word里,都有“斜体”功能。而 Fabric.js 也不例外。本文主要讲解在 Fabric.js 中使用 IText 创建的文本进行斜体设置。

https://static001.geekbang.org/infoq/d2/d2702e0f934f30c7dc526ebe41b37432.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 控制元素层级 👑

用户头像
德育处主任
2022-06-20

👑元素数量多了,难免会产生重叠。又或者某些效果需要几个元素重叠起来。这些情况大概率需要控制元素的层级。

https://static001.geekbang.org/infoq/e2/e2e552a809d10ce192af048da888f35c.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

『Three.js』场景 Scene

用户头像
德育处主任
2022-06-13

关于你想知道 Three.js 场景的用法,这里全都有。Scene的属性和方法本来也不多,本文将详细讲解场景的每个方法和属性~

https://static001.geekbang.org/infoq/56/56bef78a44a0fb2c0935eec9b7e263a5.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

『Three.js』辅助坐标轴

用户头像
德育处主任
2022-06-12

如果你使用 Three.js 开发时,我建议你把辅助坐标轴加上,这样比较方便你观察元素的位置和关系~

https://static001.geekbang.org/infoq/59/59e71885475b0a6c3eb5f410cbbfbdff.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 动态设置字号大小 🎄

用户头像
德育处主任
2022-06-11

🎄 本文讲解在使用Fabric.js创建可编辑文本后,支持用户动态修改全局或者被选中字符的字号大小。该案例适合做在线ps等应用🎄

https://static001.geekbang.org/infoq/dd/dd8ace27e3bf9f2e7436589a1e4bd300.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

『Three.js』起飞!

用户头像
德育处主任
2022-06-10

0基础学Three.js,使用原生三件套的方式快速开启学习旅程,不需要麻烦的环境搭建。一文搞懂Three核心概念~

https://static001.geekbang.org/infoq/f8/f81b827073356d929ab8fc018da3ff39.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 锁定背景图,不受缩放和拖拽的影响🎃

用户头像
德育处主任
2022-06-06

🎃 如果你的项目有画布拖拽、缩放等功能,而且你不希望背景图跟随拖拽或缩放,那么你可以将 backgroundVpt 设置为 false

https://static001.geekbang.org/infoq/dd/dd8ace27e3bf9f2e7436589a1e4bd300.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 居中元素 🎗️

用户头像
德育处主任
2022-06-05

🎗️ 使用 fabric.js 时,难免需要将元素进行居中处理。本文将详细讲解如何居中元素到视窗和画布 🎗️

https://static001.geekbang.org/infoq/ca/caea4f1a768d85fd2d314093798ab548.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 缩放画布 🍬

用户头像
德育处主任
2022-06-04

使用 canvas 开发的项目,滚轮缩放画布的需求应该不算少数,比如地图。 Fabric.js 也提供了缩放画布的功能,本文主要讲解设置画布大小的几种方法。

https://static001.geekbang.org/infoq/99/992aab9d469500b341fd34130212166d.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 上标和下标的使用偏方🔥

用户头像
德育处主任
2022-06-03

在 Fabric.js 中,不管是 Text、IText、Textbox ,设置上标和下标的方法都是差不多的。本文讲一个使用偏方,也能实现上标和下标的效果🔥

https://static001.geekbang.org/infoq/f6/f6dfe85d0e8a3d0ad4a8d5ccd206802d.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 圆形笔刷

用户头像
德育处主任
2022-06-01

还记得小时候电脑课经常玩的金山画王吗?里面提供了很多仿真画笔。这次我们就做一个简化(阉割)版,用 Fabric.js 提供的能力画画

https://static001.geekbang.org/infoq/c4/c4b42aafe3e755350a383f4fcb869df8.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

OpenHarmony 3.1 Beta 版本关键特性解析——ArkUI 开发框架 canvas 组件绘制实践

canvas 是 ArkUI 开发框架里的画布组件,常用于自定义绘制图形。因为其轻量、灵活、高效等优点,被广泛应用于 UI 界面开发中

https://static001.geekbang.org/infoq/8e/8e191d9acb4c7a821a9b247aaf230a65.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Flutter ChartSpace:通过跨端 Canvas 实现图表库

基于Flutter 的图形语法库,通过跨端 Canvas ,将基于 Javascript 的图形语法库 ChartSpace 扩展至 Flutter 端

https://static001.geekbang.org/infoq/a4/a444163a4c07746af1ff6e5da92dd6aa.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

为冬奥加油——利用贝塞尔曲线实现冰墩墩

用户头像
战场小包
2022-02-18

冬奥会即将马上结束,我国体育健儿发挥优异,创造了我国参加冬奥会的新纪录。在冬奥即将结束之际,我们一起来绘制火出天际的冰墩墩,为我国体育健儿喝彩,当然也可以为自己收获一只可爱的冰墩墩。

https://static001.geekbang.org/infoq/85/851f6a8b8ac35c996ad6c2ac1c375f45.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 画布基础功能

用户头像
德育处主任
2021-11-20

Fabric.js是一个极其出色的Canvas库,如果工作需要用到Canvas,建议直接使用Fabric.js吧。

https://static001.geekbang.org/infoq/8e/8e3123159106c1a0cddce872ad8b2cfe.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 从入门到 ________

用户头像
德育处主任
2021-11-07

如果你想用 canvas 画图,那不妨试试 Fabric.js 。跟着本文一步一步操作,一定可以入门 Fabric.js

https://static001.geekbang.org/infoq/cf/cf859be88f3fbb35bb17c06ca8914e83.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

我用 10000 张图片合成我们美好的瞬间

用户头像
荣顶
2021-10-11

今天给大家带来是一个非常有意思的项目,通过切割目标图片,获得10000个方块,用我们所选择到的图片,对应的填充方块实现一个千图成像的效果.你可以用它来拼任何你想拼的有意义的大图.

canvas_canvas技术文章_InfoQ写作社区