Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use JavaScript canvas to achieve scraping effect", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "how to use JavaScript canvas to achieve scratching effect"!

The details are as follows

HTML Code:

200 yuan

Css Code:

.ggk {width: 200px; height: 100px; border: 1px solid # 000; margin: 20px auto; color: red; position: relative;} .ggk span {position: absolute; width: 100%; height: 100%; text-align: center Font-size: 50px; line-height: 100px;} # canvas {position: absolute; left: 0; top: 0;}

Js Code:

Var canvas = document.getElementById ("canvas") init () function init () {canvas.width = 200; canvas.height = 100; var ctx = canvas.getContext ("2d") / / covered with gray ctx.save () Ctx.fillStyle = 'rgb (100100100)' ctx.fillRect (0,0,200,100) draw (ctx) pro ()} / / Random content function pro () {var span = document.getElementById ("span") var arr = ["100RMB", "Thank you for patronage", "200RMB" "Thank you for your patronage." 5 million. Var num = Math.floor (Math.random () * (arr.length-1)) var text = arr [num] span [XSS _ clean] = text} function draw (ctx) {/ / event canvas.onmousedown = function (e) {/ / Mobile Event var downX= e.offsetX var downY= e.offsetY ctx.beginPath () / / ctx.globalCompositeOperation = 'destination-out' ctx.lineWidth = 10 Ctx.moveTo (downX,downY) canvas.onmousemove = function (e) {var x = e.offsetX var y = e.offsetY / / ctx.lineTo (XMagi y) ctx.clearRect (XMague y) 20) ctx.stroke ()}} / / Mouse popup event canvas.onmouseup = function () {canvas.onmousemove = null}} so far I believe you have a deeper understanding of "how to use JavaScript canvas to achieve scraping effect". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.