Sultry Canvas

5.1 Drawing pictures on Canvas

In canvas, we can use drawImage method to draw pictures on the canvas board. There are two ways to draw pictures on the canvas board: Method 1: Use js method to create an image object and specify its SRC, and then draw the image to the drawing board by drawIamge method. Method 2: Get the actual IMG tag and draw the IMG on the artboard.

API:

  • DrawImage (image,x,y): the parameters represent the image object, and the object in the upper left corner of the image drawing point
  • DrawImage (image,x,y,w,h): The parameters represent the image object, the object in the upper left corner of the image drawing point, and the width and height of the image to be drawn
  • DrawImage (image, sx, sy, sw, sh, dx, dy, dw, dh) : sx, SY, sw, sh indicates the range of source image to be captured. Parameter sx, representing the abscissa of the captured part of the source image. The parameter sy represents the ordinate of the captured part of the source image. The sw parameter indicates the width of the source image to be captured. The sh parameter indicates the height of the source image to be captured.

5.1.1 drawImage(image,x,y) method

<body> <canvas id="canvas" width="500" height="500" style="border: 1px solid red;" ></canvas> <script> window.onload = function () { /** @type {HTMLCanvasElement} */ var canvas = document.getElementById('canvas') var ctx = canvas.getContext('2d') var image = new Image() image.src = './images/header.jpg' ctx.drawImage(image,0,0)}} </script> </body>Copy the code

Preview effect in the browser

As shown in the picture above, the picture is too big to display in the Canvas palette. Now we draw the picture by defining the width and height.

5.1.2 drawImage(image,x,y, W,h

    <body>
         <canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
         <script>
                 window.onload = function () {
                     /** @type {HTMLCanvasElement} */ 
                    var canvas = document.getElementById('canvas')
                    var ctx = canvas.getContext('2d')

                    var image = new Image()
                    image.src = './images/header.jpg'

                    ctx.drawImage(image,0,0，200，200)
                }
             }
         </script>
    </body>
Copy the code

Preview effect in the browser

Now we use the third method, which takes part of the source image and draws it onto the artboard

5.1.3 drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh

<body> <canvas id="canvas" width="500" height="500" style="border: 1px solid red;" ></canvas> <script> window.onload = function () { /** @type {HTMLCanvasElement} */ var canvas = document.getElementById('canvas') var ctx = canvas.getContext('2d') var image = new Image() image.src = './images/header. JPG 'CTX. 200) / / source image CTX. DrawImage (image, 40,40,200,200,220,220,200,200) / / part of the selection from the source image}} < / script > < / body >Copy the code

Preview the effect in the browser

5.2 Canvas Tiling property

In the Canvas, we can use the createPattern() method to define how the image is tiled. Procedure: First create a Canvas or image as a tiled object, then create a fillStyle using the fillRect method to create the fill

API:

  • CreatePattern (image, type) parameter image indicates that the object to be tiled can be image or canvas. Parameter type indicates how the image is tiled. The type parameter has four values, namely no-repeat, repeat-x, repeat-y, repeat,

5.2.1 Tiled pictures

<body> <canvas id="canvas" width="500" height="500" style="border: 1px solid red;" ></canvas> <script> window.onload = function () { /** @type {HTMLCanvasElement} */ var canvas = document.getElementById('canvas') var ctx = canvas.getContext('2d') var image2 = new Image() image2.src = './images/fu.jpg' // The operation on the image should be done after the image is loaded, Image2. onload = function () {var pattern1 = ctx2.createpattern (image2, 'repeat-x') ctx2.fillstyle = pattern1 ctx2.fillrect (0, 220,200,200)}} </script> </body>Copy the code

Preview the effect in the browser

5.2.2 tile canvas

<body> <canvas id="canvas" width="500" height="500" style="border: 1px solid red;" ></canvas> <script> window.onload = function () { /** @type {HTMLCanvasElement} */ var canvas = Document.getelementbyid ('canvas') var CTX = canvas. GetContext ('2d') var myCanvas = document.createElement('canvas') myCanvas.width = 20, myCanvas.height = 20 var myctx = myCanvas.getContext('2d') myctx.beginPath() myctx.arc(10, 10, 10, 0, 360 * Math.PI / 180, true) myctx.closePath() myctx.fillStyle = "skyblue" myctx.fill() var pattern = ctx2.createPattern(myCanvas, 'repeat-x') ctx2.fillStyle = pattern ctx2.fillRect(0, 0, 200, 200) } </script> </body>Copy the code

Preview in the browser

Repeat -y in pattern = ctx2.createpattern (myCanvas, ‘repeat-x’)

Preview effect in the browser

Place the repeat in pattern = ctx2.createpattern (myCanvas, ‘repeat-x’)

Preview the effect in the browser

5.3 Clip method for image cutting

To cut an image using the clip() method, the following three steps are required. (1) Draw basic graphics. (2) Use the clip() method. (3) Draw pictures.

API:

  • Clip () creates the cut area

Preview the effect in the browser

<body> <canvas id="canvas" width="500" height="500" style="border: 1px solid red;" ></canvas> <script> window.onload = function () { /** @type {HTMLCanvasElement} */ var canvas = Document.getelementbyid ('canvas') var ctx3 = canvas.getContext('2d') var image2 = new Image() image2.src = './images/header.jpg' ctx3.beginpath () ctx3.arc(70,70,50,0,360* math.pi,true) ctx3.closepath () ctx3.clip() Image2. onload = function () {ctx3.drawimage (image,0,0)}} </script> </body>Copy the code

There are other uses of the clip. The area created with the clip will be cut off when you draw an image outside of that area again, but you can call save, The restore method is changed by saving the state, which will be explained later when we talk about the Canvas state.