fluencelabs/wasm-bindgen
1
0
Fork 0
mirror of https://github.com/fluencelabs/wasm-bindgen synced 2025-06-14 13:31:22 +00:00
Code Issues Projects Releases Wiki Activity

example: Add an example of drawing a smiley face with canvas

Browse Source 
Adapted from https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
This commit is contained in:
Nick Fitzgerald
2018-08-15 16:56:24 -07:00
parent b8afa0abde
commit 34363aff12
10 changed files with 154 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Cargo.toml
View File

@ -50,6 +50,7 @@ members = [
"crates/webidl-tests",
"examples/add",
"examples/asm.js",
"examples/canvas",
"examples/char",
"examples/closures",
"examples/comments",

4
examples/canvas/.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
package-lock.json
wasm_bindgen_canvas_demo.js
wasm_bindgen_canvas_demo_bg.js
wasm_bindgen_canvas_demo_bg.wasm

12
examples/canvas/Cargo.toml Normal file
View File

@ -0,0 +1,12 @@
[package]
name = "wasm-bindgen-canvas-demo"
version = "0.1.0"
authors = ["The wasm-bindgen Developers"]
[lib]
crate-type = ["cdylib"]
[dependencies]
js-sys = { path = "../../crates/js-sys" }
wasm-bindgen = { path = "../.." }
web-sys = { path = "../../crates/web-sys" }

15
examples/canvas/README.md Normal file
View File

@ -0,0 +1,15 @@
# Canvas 2D Example
This directory is an example of using the `web-sys` crate to draw on a 2D
canvas.
You can build and run the example with:
```
$ ./build.sh
```
(or running the commands on Windows manually)
and then opening up `http://localhost:8080/` in a web browser should show a
smiley face drawn on canvas by Rust and WebAssembly.

15
examples/canvas/build.sh Executable file
View File

@ -0,0 +1,15 @@
#!/bin/sh
# For more coments about what's going on here, see the `hello_world` example
set -ex
cd "$(dirname $0)"
cargo +nightly build --target wasm32-unknown-unknown
cargo +nightly run --manifest-path ../../crates/cli/Cargo.toml \
--bin wasm-bindgen -- \
../../target/wasm32-unknown-unknown/debug/wasm_bindgen_canvas_demo.wasm --out-dir .
npm install
npm run serve

9
examples/canvas/index.html Normal file
View File

@ -0,0 +1,9 @@
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
</head>
<body>
<canvas id="canvas" height="150" width="150" />
<script src='./index.js'></script>
</body>
</html>

5
examples/canvas/index.js Normal file
View File

@ -0,0 +1,5 @@
// For more comments about what's going on here, check out the `hello_world`
// example.
import('./wasm_bindgen_canvas_demo').then(canvas => {
canvas.draw();
});

10
examples/canvas/package.json Normal file
View File

@ -0,0 +1,10 @@
{
"scripts": {
"serve": "webpack-dev-server"
},
"devDependencies": {
"webpack": "^4.11.1",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0"
}
}

73
examples/canvas/src/lib.rs Executable file
View File

@ -0,0 +1,73 @@
#![feature(use_extern_macros)]
extern crate js_sys;
extern crate wasm_bindgen;
extern crate web_sys;
use std::f64;
use wasm_bindgen::prelude::*;
use wasm_bindgen::JsCast;
#[wasm_bindgen]
extern "C" {
static document: web_sys::Document;
}
#[wasm_bindgen]
pub fn draw() {
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_using_context_id("2d")
.unwrap()
.unwrap()
.dyn_into::<web_sys::CanvasRenderingContext2D>()
.unwrap();
context.begin_path();
// Draw the outer circle.
context.arc_using_x_and_y_and_radius_and_start_angle_and_end_angle(
75.0,
75.0,
50.0,
0.0,
f64::consts::PI * 2.0,
);
// Draw the mouth.
context.move_to(110.0, 75.0);
context.arc_using_x_and_y_and_radius_and_start_angle_and_end_angle(
75.0,
75.0,
35.0,
0.0,
f64::consts::PI,
);
// Draw the left eye.
context.move_to(65.0, 65.0);
context.arc_using_x_and_y_and_radius_and_start_angle_and_end_angle(
60.0,
65.0,
5.0,
0.0,
f64::consts::PI * 2.0,
);
// Draw the right eye.
context.move_to(95.0, 65.0);
context.arc_using_x_and_y_and_radius_and_start_angle_and_end_angle(
90.0,
65.0,
5.0,
0.0,
f64::consts::PI * 2.0,
);
context.stroke();
}

10
examples/canvas/webpack.config.js Normal file
View File

@ -0,0 +1,10 @@
const path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
},
mode: 'development'
};