Canvas drawing 2

One 、 Draw text

1） explain ：

Text color usage fillStyle Attribute specifies ;
​ Text font usage font Attribute specifies , and CSS Agreement ;
textAlign Property specifies the horizontal alignment ,
        Optional value ：start、left etc. ,
textBaseline Then specify the vertical direction ,
        Optional value ：top、hanging etc.

2）  Example （ A line of words ）：

<style>
        #box{
            border: 2px green solid;
        }
</style>
<canvas id="box" width="400px" height="200px"> canvas </canvas>
<script>
    var box=document.querySelector("#box")
    var ctx=box.getContext("2d")
      //fillText(): Draw on the canvas “ Filled ” Text 
      // Three parameters ：  The content of the drawing ;  The starting point x coordinate ;  The starting point y coordinate ;
    ctx.fillText(" This text is drawn by me ",100,100,50)   //50 Represents the maximum width   More than will squeeze the text 
    
      //strokeText(): Draw hollow text on the canvas （ No filling ）  Style vs css The same as 
    ctx.font="30px ziti"  // The font gets thicker  font: italic bold  font size   Font library （ It has to be ）
    ctx.strokeText(" This hollowed out text is drawn by me ",100,100,)
</script>

 

  design sketch ：

 

Two 、 Clear paint

1） explain ：

clearRect() : Clears the specified pixel in a given rectangle  
      grammar ：context.clearRect(x,y,width,height)

Parameters	describe
x	The top left corner of the rectangle to be cleared x coordinate
y	The top left corner of the rectangle to be cleared y coordinate
width	The width of the rectangle to clear , In pixel
height	The height of the rectangle to clear , In pixel

 2） Example （ Two ways to clear the screen ）：

<canvas id="box" width="1000px" height="600px"> canvas </canvas>
<script>
        var box = document.querySelector("#box")
        var ctx = box.getContext("2d")
        ctx.fillStyle = "blue"
        ctx.fillRect(100, 100, 400, 500)
        // Official clear screen 
        ctx.clearRect(100, 100, 100, 100)
        // Another kind of clear screen ： hold box Reset the width and height of one side 
        //box.width=1000px   Retreated   Repaint 
</script>

3、 ... and 、 Drawing pictures

1） explain ：

drawImage()： Copy the contents of the original picture pixels to the canvas
​     The first parameter is the source image   It can be img Element or Image Constructor to create an off screen picture object
​     When there are three parameters ： Specify the drawing of the picture x、y coordinate ;
​     Five parameters ： Specify the drawing of the picture x、y coordinate , And the width of the picture 、 Height ;

Parameters	describe
img	Specify the image to use 、 Canvas or video
sx	Optional . Start cutting x coordinates
sy	Optional . Start cutting y coordinates
swidth	Optional . The width of the cut image
sweight	Optional . The height of the cut image
x	To place an image on a canvas x coordinates
y	To place an image on a canvas y coordinates
width	Optional . The width of the image to use .（ Stretch or shrink the image ）
height	Optional . The height of the image to be used .（ Stretch or shrink the image ）

2） Example （ Write the picture into the label and then draw ）：

<style>
        #box {
            border: 2px green solid;
        }

        img {
            width: 300px;
            height: 400px;
        }
</style>
<canvas id="box" width="800px" height="600px"> canvas </canvas>
<img src="../DOM/img/rose1.jpg" id="img1"><br>
<script>
        var box = document.querySelector("#box")
        var ctx = box.getContext("2d")
        img1.onload = function () {
            // When img hold src This function will not run until the resources of are loaded 
            ctx.drawImage(img1, 100, 100, 300, 400)
        }
        //img1.onload  Than  window.onload  First run ： Load the picture first and then window
</script>
<script>
        window.onload = function () {
            // As a browser window After loading, this function will run 
            var box = document.querySelector("#box")
            var ctx = box.getContext("2d")
            ctx.drawImage(img1, 500, 0, 300, 400)
        }  
</script>

  design sketch ：

3） Example （ Create an image directly There is no need to write labels ）：

<style>
        #box {
            border: 2px green solid;
        }

        img {
            width: 300px;
            height: 400px;
        }
</style>
<canvas id="box" width="800px" height="600px"> canvas </canvas>
<script>
        var box = document.querySelector("#box")
        var ctx = box.getContext("2d")
        var img1=new Image()
        img1.src='../DOM/img/rose1.jpg'
        img1.onload = function () {
            ctx.drawImage(img1, 0, 0 ,200 ,300)
        }
        var img2=new Image()
        img2.src='../DOM/img/rose2.jpg'
        img2.onload = function () {
         ctx.drawImage(img2, 300, 200 ,300, 400)
        }
</script>

  design sketch ：