404
html5css3javascript

JSでルーレットを作った。

2018-09-021 min read
JSでルーレットを作った。

目次

  1. 概要
  2. demo
  3. 追記-20190120

概要

だいぶ前にJSで作ったルーレットを公開します。 特にフレームワークとか使っていません。

DEMO

デモ | 別ウィンドウで開く

以上。

追記 2019/01/20

↑これだと流石にお粗末すぎるので、回転するルーレットを作りました。

デモ画像

https://tech-blog.s-yoshiki.com/2019/01/1024/

おすすめの記事
mavonEditor と Vue.js で作るMarkdownエディタのデモ + APIの紹介

mavonEditor と Vue.js で作るMarkdownエディタのデモ + APIの紹介

html5css3javascript
【JavaScript】凸包(グラハムスキャン)を可視化・アニメーション【Canvas】

【JavaScript】凸包(グラハムスキャン)を可視化・アニメーション【Canvas】

html5css3javascript
【JavaScript】K-meansをアニメーション・可視化したら蜘蛛みたいな動きをした｜その1

【JavaScript】K-meansをアニメーション・可視化したら蜘蛛みたいな動きをした｜その1

html5css3javascript
FileAPIで画像を読み込み canvasに描画

FileAPIで画像を読み込み canvasに描画

html5css3javascript
Firebase + Nuxt で認証付きページを作るときに参考にしたいところ

Firebase + Nuxt で認証付きページを作るときに参考にしたいところ

html5javascriptvue.js
MonacoEditor + Vue を使ってエディタを実装

MonacoEditor + Vue を使ってエディタを実装

html5javascriptmonaco%20editor
async awaitで画像を読み込み canvasに描画 JavaScript

async awaitで画像を読み込み canvasに描画 JavaScript

html5javascriptcanvas
JavaScriptで画像のヒストグラムの正規化

JavaScriptで画像のヒストグラムの正規化

html5javascriptcanvas
画像のヒストグラムを表示する Chart.js JavaScript canvas

画像のヒストグラムを表示する Chart.js JavaScript canvas

html5javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
画像のプーリング処理 canvas + JavaScript

画像のプーリング処理 canvas + JavaScript

html5javascript%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92
JSで画像をまとめて読み込む(プリロードする)

JSで画像をまとめて読み込む(プリロードする)

html5javascript
画像にモザイクをかける JavaScript canvas デモあり

画像にモザイクをかける JavaScript canvas デモあり

html5javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
回転ルーレットを作る JavaScript + canvas

回転ルーレットを作る JavaScript + canvas

html5javascriptcanvas
文字列のAAを自動生成 デモ + サンプルコード JavaScript

文字列のAAを自動生成 デモ + サンプルコード JavaScript

html5javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
最新の記事
CloudFront OAC経由のLambda Function URLでPOSTだけ失敗する原因と対処

CloudFront OAC経由のLambda Function URLでPOSTだけ失敗する原因と対処

awscloudfrontlambda
NestJSでBasic認証

NestJSでBasic認証

nestjstypescriptnode.js
Prisma頻出コマンドとマイグレーションの運用

Prisma頻出コマンドとマイグレーションの運用

prismatypescriptnode.js
ChatGPT API でレスポンスをJSONとして受け取る

ChatGPT API でレスポンスをJSONとして受け取る

chatgptopenainode.js
PrismaでN対N(多対多)のテーブルを作成するときのTips

PrismaでN対N(多対多)のテーブルを作成するときのTips

node.jsjavascripttypescript
Node.js TypeScript で OpenAI

Node.js TypeScript で OpenAI

node.jsjavascripttypescript
NestJS + Prisma で Stream を用いた file download

NestJS + Prisma で Stream を用いた file download

nestjsprismanode.js
Prisma で Iterator を作成する

Prisma で Iterator を作成する

prismanode.jstypescript
zod-prisma-types で Prisma から Zod を生成する

zod-prisma-types で Prisma から Zod を生成する

prismanode.jstypescript
NestJS Prisma Zod OpenAPI で型を堅牢にする

NestJS Prisma Zod OpenAPI で型を堅牢にする

nestjsprismanode.js
Headless CMS の Strapi をインストールからAPIエンドポイント作成

Headless CMS の Strapi をインストールからAPIエンドポイント作成

strapijavascriptnode.js
React/Next.jsでcanvasを利用する

React/Next.jsでcanvasを利用する

reactnext.jstypescript
[turborepo]monorepo管理のNext.jsアプリをvercelにデプロイ

[turborepo]monorepo管理のNext.jsアプリをvercelにデプロイ

vercelturboreponext.js
JSのDateに渡せる文字列のパターンが複雑なので網羅してみる

JSのDateに渡せる文字列のパターンが複雑なので網羅してみる

javascripttypescriptnode.js
[Unicode]スペース以外の見えない空白文字の一覧

[Unicode]スペース以外の見えない空白文字の一覧

javascript
よく読まれている記事
Proxy環境下でcurlを実行する

Proxy環境下でcurlを実行する

linuxcurl
OpenCVのMatのタイプ一覧表

OpenCVのMatのタイプ一覧表

%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86opencv
Macでも利用できるDBクライアント MySQL PostgreSQL Oracle など

Macでも利用できるDBクライアント MySQL PostgreSQL Oracle など

linux%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9mysql
TablePlusを使ってみる。シンプルでモダンなSQLクライアントツール

TablePlusを使ってみる。シンプルでモダンなSQLクライアントツール

%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9
DBクライアントツールはDBeaverをおすすめしたい

DBクライアントツールはDBeaverをおすすめしたい

oraclemysqlsqlite
AWS S3のアクセスキーIDとシークレットアクセスキーの取得 作業用ユーザを作成

AWS S3のアクセスキーIDとシークレットアクセスキーの取得 作業用ユーザを作成

amazon%20awslinuxamazon%20s3
AtCoderで初めて色がつくまでの話(茶色) レートが中々上がらなかった原因

AtCoderで初めて色がつくまでの話(茶色) レートが中々上がらなかった原因

%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E9%9B%91%E8%AB%87
CentOS8でEPELとPowerToolsリポジトリの有効化

CentOS8でEPELとPowerToolsリポジトリの有効化

centosred%20hatEPEL
Macでターミナルからポートスキャンを行う方法。

Macでターミナルからポートスキャンを行う方法。

linuxmacapple
Python + OpenCVのfillConvexPolyで複雑なポリゴンを描画する

Python + OpenCVのfillConvexPolyで複雑なポリゴンを描画する

python%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86opencv
著者について
githubzennqiita
ただの備忘録です。

※外部送信に関する公表事項