Tag：canvas
-
Time：2019-12-9
arc-progress.js The GitHub address of arc progress bar drawn with canvas <p align=”center”> <img src=’https://user-gold-cdn.xitu.io…;h=522&f=png&s=36261′ width=640/ > </p> Installation npm install arc-progress -S Import JS file directly If you choose to use<script>Directly import the JS file, and click to download the arc-progress.min.js file. Usage <div id=’progress-container’></div> <script> const customText = [{text: ‘%’, size: ’12px’, color: […]
-
Time：2019-12-8
Come to the point I can go to the tool address directly > > painter custom post Since it is mounted on GitHub page, the opening speed will be slower. Please wait patiently or solve the problem of GIT network speed by yourself background When making small programs, we often have a need to share […]
-
Time：2019-12-7
This afternoon, the wechat circle of friends exploded. Everyone is asking for the national flag. Welcome the national day new face activity | Tencent News composite service wechat opened.As for us, we also come to rub against the heat and talk about the technology. Guess how Authorization – get user image Load Images Gesture operation […]
-
Time：2019-12-6
I believe that yesterday’s circle of friends was mostly like this Or maybe it’s like this The reason is that Tencent News has made a“National flag“PicturesH5Website, scan the code to experience:The event seems to be over So, how to implement a simple example by yourself? usehtml2canvasPlug in is as simple as flying! html2canvas As the […]
-
Time：2019-12-5
I. write in the front: In September 24th, the circle of friends, this patriotic style, a switch to the national day exclusive activities of the head, should be the old fellow of the old circle of friends, as a programmer, code from life, the author slightly hand itch, think of the principle is very simple, […]
-
Time：2019-12-4
Preface: This series of articles will tell me that in the past year, I independently developed a project called data visualization, with a link [https://github.com/chuxiaoguo…]. Welcome to star. We can see similar projects in the market at this stage, Alibaba’s datav [https://data.aliyun.com/visua…] Baidu’s sugar [https://cloud.baidu.com/produ…] Of course, there are other ones. I’ll just introduce them […]
-
Time：2019-12-3
Framework Research In order to help you avoid detours, I have summarized the following projects that can be used for reference. If you like, you can do secondary development based on their foundation: Draw.io prototype design editor [https://github.com/jgraph/drawio] Method draw SVG drawing editor [https://github.com/methodofac…] Fabric.js canvas graphic editor [https://github.com/fabric JS / F…] Why don’t I […]
-
Time：2019-12-2
Threejs to realize 3D panoramic view of Shanghai Bund Recently, I entered the pit of three.js. I want to do some demo with three.js in order to consolidate my recent knowledge points, and just in time for the National Day holiday. With this~ Preview address: Shanghai Bund of three.js Tip1: after opening, the browser has […]
-
Time：2019-11-30
W and H refer to the width and height of the window respectively componentDidMount(){ var c=document.getElementById(“canvas”); var ctx=c.getContext(“2d”); ctx.fillStyle = “#fff”; ctx.fillRect(0, 0, 100,50); ctx.font=”50px Arial “; ctx.textBaseline = “top”; ctx.fillStyle = “red”; ctx.fillText(“HELLO”,0,0); var imgData=ctx.getImageData(0,0,300,50).data; let point=[] , x=[] for(let i=0;i<imgData.length;i++){ for(let j=i*1200;j<(i+1)*1200;j+=4){ if(imgData[j]==255 && imgData[j+1]==0 && imgData[j+2]==0 ){ x.push(j%1200) } } if(x.length){ point.push(x) […]
-
Time：2019-11-29
The company had a national dayCard collection and lotteryLittle activity. Lottery needsScratch cardThe effect of CSS is not realized. See how I use canvas to achieve the scratch card effect.No more nonsense, online effect jsrun test address, lilong.top test address What are the implementation plans clearRectThis is the first API I found. Its function isClear […]
-
Time：2019-11-28
Preface In the previous article, we drew a GraphView scene, and passed thegraphView.dm()Get the data container and pass thegraphView.dm().add()The setposition function adds two node nodes, sets the node location and SETIMAGE to add pictures to the nodes through setposition, and then passes theht.Edge(sourceNode, targetNode)Two lines are added (in fact, more lines can be added), and […]
-
Time：2019-11-27
HTML 5 games Before introducing the little game, first look at a framework phase.PhaserThe framework is fast, free and open sourceHTML5Game development framework, which provides canvas and webgl two rendering methods, compatible with PC and mobile browsers. I. phaser version Start upPhaserBefore the game, you need to define aPhaser.GameObject instance and pass configuration information to […]
