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

This article mainly shows you "how to use HTML5 Canvas to achieve picture zoom, color gradient effect", the content is easy to understand, clear, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn "how to use HTML5 Canvas to achieve picture scaling, color gradient effect" this article.

Flip, move, pan, zoom in, zoom out

Var canvas = document.getElementById ('canvas')

If (canvas.getContext) {

Var context = canvas.getContext ('2d')

/ / Zoom in and out

Context.beginPath ()

Context.strokeStyle = "# 000000"

Context.strokeRect (1010150100)

/ / magnify 3 times

Context.scale (3pr 3)

Context.beginPath ()

Context.strokeStyle ='# cccccc'

Context.strokeRect (1010150100)

/ / shrink

Context.scale (0.5, 0.5)

Context.beginPath ()

Context.strokeStyle ='# cccccc'

Context.strokeRect (1010150100)

/ / Flip

Var img = new Image ()

Img.src = 'images/1.jpg'

Img.onload = function () {

Context.drawImage (img, 100.10)

Context.scale (1,-1)

Context.drawImage (img, 0,500)

}

/ / Pan

Context.beginPath ()

Context.strokeStyle ='# 000000'

Context.strokeRect (10101150100)

/ / x move 50 y move 100

Context.translate (50100)

Context.beginPath ()

Context.strokeStyle ='# cccccc'

Context.strokeRect (1010150100)

/ / rotate

Context.beginPath ()

Context.strokeStyle ='# 000000'

Context.strokeRect (2007.50,100,50,000,50)

/ / the default rotation is based on the center of 0p0. Using translate, you can rotate according to the center set by yourself.

Context.translate (250,50,75)

Context.rotate (45 * Math.PI / 180)

Context.translate (- 250,75)

Context.beginPath ()

Context.strokeStyle ='# cccccc'

Context.strokeRect (2007.50,100,50,000,50)

/ / transform matrix

Context.beginPath ()

Context.strokeStyle ='# 000000'

Context.strokeRect (1010150100)

Context.transform (3pc0re0p0pl 3p0p0p0p0)

Context.beginPath ()

Context.strokeStyle ='# cccccc'

Context.strokeRect (1010150100)

}

Gradient, image combination effect, color flip

XML/HTML Code copies content to the clipboard

Var canvas = document.getElementById ('canvas')

If (canvas.getContext) {

Var context = canvas.getContext ('2d')

/ / Linear drawing gradients

Var grd = context.createLinearGradient (0Pol 0200100)

/ / postion must be vertical between 0.1 and 1.0, indicating the relative position of the color in the gradient, and color represents the color.

Grd.addColorStop (0.1, "# 00ff00")

Grd.addColorStop (0.8, "# ff0000")

Context.fillStyle = grd

Context.fillRect (0Jing 0, 200100)

/ / Radial gradient

Var grd = context.createRadialGradient (100, 100, 10, 10, 100, 100, 100, 50)

Grd.addColorStop (0.1, "# 00ff00")

Grd.addColorStop (0.8,'# ff0000')

Context.fillStyle = grd

Context.fillRect (0Pol 0200200)

/ / Image combination effect

Context.fillStyle ='# 00ff00'

Context.fillRect (10, 10, 50, 50, 50)

/ / New drawing

/ / context.globalCompositeOperation = "source-over"

/ / only draw new content and delete all other content

Context.globalCompositeOperation = 'copy'

/ / where the graphics overlap, the color values are subtracted.

Context.globalCompositeOperation = 'darker'

/ / the content already on the canvas will only be retained where it overlaps with other graphics.

Context.globalCompositeOperation = 'destination-atop'

/ / refer to http://www.w3school.com.cn/htmldom/prop_canvasrenderingcontext2d_globalcompositeoperation.asp

Context.beginPath ()

Context.fillStyle ='# ff0000'

Context.arc (50.50.30.0,2 * Math.PI)

Context.fill ()

/ / Color flip

Var img = new Image ()

Img.src = 'images/1.jpg'

Img.onload = function () {

Context.drawImage (img, 0J 0,1,1)

Var imgData = context.getImageData (0je 0,1je 1)

Var pixels = imgData.data

Console.log (pixels)

For (var I = 0, n = pixels.length; I < n; iTunes 4) {

Pixels [I] = 255-pixels [I]

Pixels [iTun1] = 255-pixels [iTun1]

Pixels [iTun2] = 255-pixels [iTun2]

}

Context.putImageData (imgData, 250,0)

}

}

The above is all the contents of this article entitled "how to use HTML5 Canvas to achieve picture scaling and color gradient effect". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.