histausse/webasm-circle-table
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

first canvas drawing

Browse source
This commit is contained in:
histausse 2022-01-14 22:34:58 +01:00
commit 681139064e
Signed by: histausse
GPG key ID: 67486F107F62E9E9
5 changed files with 91 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
/target
Cargo.lock

22
Cargo.toml Normal file
View file

@ -0,0 +1,22 @@
[package]
name = "circle_canvas"
version = "0.1.0"
authors = ["Histausse"]
edition = "2021"
[lib]
crate-type = ["cdylib"]
[dependencies]
js-sys = "0.3.55"
wasm-bindgen = "0.2.78"
[dependencies.web-sys]
version = "0.3.4"
features = [
'CanvasRenderingContext2d',
'Document',
'Element',
'HtmlCanvasElement',
'Window',
]

11
README.md Normal file
View file

@ -0,0 +1,11 @@
# Build:
```
wasm-pack build --target web
```
# Run:
```
python3 -m http.server
```

18
index.html Normal file
View file

@ -0,0 +1,18 @@
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
</head>
<body>
<script type="module">
import init from "./pkg/circle_canvas.js";
async function run() {
await init();
}
run();
</script>
<canvas id="canvas" height="150" width="150"></canvas>
</body>
</html>

38
src/lib.rs Normal file
View file

@ -0,0 +1,38 @@
use std::f64;
use wasm_bindgen::prelude::*;
use wasm_bindgen::JsCast;
#[wasm_bindgen(start)]
pub fn start() {
let document = web_sys::window().unwrap().document().unwrap();
let canvas = document.get_element_by_id("canvas").unwrap();
let canvas: web_sys::HtmlCanvasElement = canvas
.dyn_into::<web_sys::HtmlCanvasElement>()
.map_err(|_| ())
.unwrap();
let context = canvas
.get_context("2d")
.unwrap()
.unwrap()
.dyn_into::<web_sys::CanvasRenderingContext2d>()
.unwrap();
context.begin_path();
context
.arc(75.0, 75.0, 50.0, 0.0, f64::consts::PI * 2.0)
.unwrap();
context.move_to(110.0, 75.0);
context
.arc(75.0, 75.0, 35.0, 0.0, f64::consts::PI)
.unwrap();
context.move_to(65.0, 65.0);
context
.arc(60.0, 65.0, 5.0, 0.0, f64::consts::PI * 2.0)
.unwrap();
context.stroke();
}