美文网首页
wasm操作DOM

wasm操作DOM

作者: 天問_专注于大前端技术 | 来源:发表于2022-01-08 22:11 被阅读0次

新建一个最简单的wasm应用并在浏览器里运行起来,这一篇,用wasm在页面上新建DOM元素。

使用web-sys库
rust写的wasm要操作DOM,需要引入web-sys库,在Cargo.toml里添加下面的内容:

The web-sys crate allows you to interact with the various browser APIs,

like the DOM.

[dependencies.web-sys]
version = "0.3.22"
features = [
'CanvasRenderingContext2d',
'CssStyleDeclaration',
'Document',
'Element',
'EventTarget',
'HtmlCanvasElement',
'HtmlElement',
'MouseEvent',
'Node',
'Window',
]

lib.rs中添加操作DOM的代码
添加必要的引用

use std::cell::Cell;
use std::rc::Rc;
use wasm_bindgen::JsCast;

添加操作DOM的代码,这里创建了一个h5的canvas,并绑定鼠标按下、移动、弹起事件,实现鼠标按下移动绘制线条。这些功能从hcl_init()开始触发。

相关文章

  • wasm操作DOM

    新建一个最简单的wasm应用并在浏览器里运行起来,这一篇,用wasm在页面上新建DOM元素。 使用web-sys库...

  • 以 Wagon 为例, Golang 解析 wasm

    wasm 原理 wasm 指令的解析,其实都是 入栈,出栈的操作, 它是一个基于栈的虚拟机,比如get_local...

  • JQuery 17

    jQuery中的DOM操作 DOM操作的分类 DOM操作分为3个方面,即DOM Core(核心)、HTML-DOM...

  • DOM (javascript DOM节点操作)

    DOM (javascript DOM节点操作) 本节目录 查找DOM元素 DOM节点操作 javascript操...

  • Vue解决了哪些问题

    虚拟 dom:dom 操作时非常耗性能的,不再使用原生的 dom 操作节点,极大的解放 dom 操作,但具体操作的...

  • jQuery中的DOM操作

    DOM操作的分类     DOM操作分为3个方面,即DOM Core(核心)、HTML-DOM和CSS-DOM。 ...

  • jQuery——DOM

    DOM操作分类 一般来说,DOM操作分为3个方面,即DOM Core、HTML-DOM、CSS-DOM。 DOM ...

  • jQuery中的DOM操作

    jQuery中的DOM操作 DOM操作的分类 一般来说DOM的操作分为3个方面,即DOM Core、HTML-DO...

  • 会jquery 就能快速快速上手 vue? 你仿佛在说笑

    vue和jquery 操作DOM的区别 jquery 操作Dom 的思维:获取Dom元素 步骤: 1、在dom中输...

  • Wasm介绍之2:指令集和栈

    上一篇文章介绍了WebAssembly(后文简称Wasm)二进制格式,这一篇文章将介绍Wasm指令集、操作数栈和部...

网友评论

      本文标题:wasm操作DOM

      本文链接:https://www.haomeiwen.com/subject/tieycrtx.html