Category : canvas

canvas_x No need for any third-party dependence, light tool library.Canvas draws posters and generates two-dimensional codes with logo. Can also generate editing interface, user-defined input, one-button generation, etc. By default, cross-domain images are turned on, but the images on the server side also need corresponding cross-domain settings on the back end. Project address https://github.com/sayll/canvas_x Use ..

Read more

h5-cropper The mobile picture clipper is based oncropperjsA simple cutting device Project address https://github.com/sayll/h5-cropper Case presentation HTML section: <!DOCTYPE html> <html lang=”cn”> <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no” /> <title>裁剪案例</title> </head> <script src=”./h5-cropper.js”></script> <body style=”font-size: 14px”> <img id=”image” src=”http://placekitten.com/g/720/400″ width=”100%” alt=””> <div> <button style=”width: 100%; font-size: 18px;” id=”button”>开始裁剪</button> </div> </body> <script ..

Read more

First, create a new html file, which willbodySet the background to the dark blue of the sky and create onecanvas, canvas operation logic is placed insnow.jsMedium: <! DOCTYPE html> <head> <style> body { background-color: #102a54; } </style> </head> <body> <canvas id=’sky’></canvas> <script src=”snow.js”></script> </body> </html> The canvas operation will be executed after the page is ..

Read more

Introduction This article starts from the drawing foundation and introduces how to use it in detail.Three.jsDevelop a full-featured panorama plug-in. Let’s look at the plug-in effect first: If you are rightThree.jsYou are already familiar with it, or you want to skip the basic theory, then you can directly learn from it.Panoramic previewStarting to look. For ..

Read more

I like the front-end and the original motivation for learning the front-end is that it can produce very cool effects. However, the skills I use to go to work now are mostly in business logic, not what I originally wanted to do. So after work, I plan to pick up my interest again and learn ..

Read more

Project address:https://github.com/jrainlau/draw-something Download & Run git clone git@github.com:jrainlau/draw-something.git cd draw-something Js//opens the websocket server. Npm run dev // runs the client program Then the browser opens localhost:8080 Effect preview: Overall structure I have been playing games with my friends, such as you draw and guess, because I am so carefree. I suddenly thought that I ..

Read more

This article is original, welcome to reprint, reprint please indicate the author’s informationProject address:SphinxJSOnline experience address:https://jrainlau.github.io/sp … Speaking of front-end caching, most people think of only a few conventional schemes, such ascookie,localStorage,sessionStorage, or addindexedDBAndwebSQL, andmanifestOffline cache. In addition, is there any other way to cache the front-end data? This article will take you to explore ..

Read more

Experience address:https://jrainlau.github.io/sp …Project address:https://github.com/jrainlau/s … SphinxJS An ultra-light open source library that can encode strings into png pictures or decode strings from png pictures, with the total number of codes not exceeding 100 lines! Use method vianpmInstallation npm install sphinx.js via<script></script>Label introduction <script src=”sphinx.js”></script> It is worth noting that becauseSphinxJSUsing ES2015PromiseAs well as other great ..

Read more