Tag:canvas

  • The plug-in of arc progress bar drawn with 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: […]

  • Small program poster generation tool, visual editing, cool poster one click generation export code use

    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 […]

  • Please give me a flag @ wechat official

    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 […]

  • How to simply realize a “national flag head image generator” to brush and explode the circle of friends

    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 […]

  • Develop wechat one click production “National Day Avatar” gadget, which is more reliable than your @ wechat official profile [based on vue2.6x construction]

    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, […]

  • The beginning of sad road of visual development

    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 […]

  • Frame selection of sour road in visual development

    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 […]

  • Threejs to realize 3D panoramic view of Shanghai Bund

    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 […]

  • 30 lines of code to realize arbitrary text to particles

    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) […]

  • Realization of scraping card effect

    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 […]

  • Quick development of network topology based on HTML5 (2)

    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 […]

  • Developing HTML5 games

    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 […]