当前位置：网站首页>Canvas draw text and clear draw

Canvas draw text and clear draw

2022-07-23 19:25:00 【M78_ Domestic 007】

Draw text

There are two ways to draw text ：fillText and strokeText

fillText() There are five parameters , The first parameter is the drawing content ( character string ), The second parameter is the starting point x Axis coordinates , The third parameter is the starting point y The last two parameters of axis coordinates are optional , Is the maximum width and maximum height .

strokeText similar , But it has no padding , Simply put, text cannot be changed in color .

Text color usage fillStyle Attribute specifies

Text font usage font Attribute specifies ：font:" font size Font style ", Both values are indispensable .

textAlign Property specifies the horizontal alignment ;

Attribute value has ：start、left、center、right、end

textBaseline Then specify the vertical direction .

Attribute value has ：top、hanging、middle 、alphabetic、ideographic、bottom

After learning to draw text , Let's improve the histogram written yesterday .

 <style>
        #cav{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="cav" width="500" height="400"></canvas>
    <script>
        var cav =document.querySelector("#cav")
        var ctx= cav.getContext("2d")
        ctx.moveTo(50,350)
        ctx.lineTo(450,350)
        ctx.stroke()
        // Fake data 
        arr=[500,600,800,700,500,800]
        arr1=[" First quarter "," The two quarter "," third quater "," In the fourth quarter "," Minimum quarter "," The highest quarter ",]
        // Set the maximum height 
        var maxh=300/Math.max(...arr)
        for (let i = 0; i < arr.length; i++) {
            ctx.beginPath()
            ctx.rect(80+i*60,350-maxh*arr[i],50,maxh*arr[i])
            ctx.fillText(arr1[i],85+i*60,370)
            ctx.fillText(arr[i],90+i*60,350-maxh*arr[i]-10)
            ctx.font="14px weiruanyahei"
            ctx.fillStyle="purple"
            ctx.fill()
        }
        
    </script>

effect ：

Clear paint

clearRect() Method to clear the specified pixels in a given rectangle

There are four parameters ：

The first parameter is the vertex of the upper left corner of the rectangle x Axis coordinates ;

The second parameter is the vertex of the upper left corner of the rectangle y Axis coordinates ;

The third parameter is the width of the rectangle ;

The fourth parameter is the height of the rectangle .

Code demonstration ：

    <canvas id="cav" width="400" height="400"></canvas>

<script>
    var cav=document.querySelector("#cav")
    var cxt=cav.getContext("2d")
    // Set fill color 
    cxt.fillStyle="pink"
    // Create a rectangle filled with color 
    cxt.fillRect(100,100,100,200)
    // Clear half 
    cxt.clearRect(100,100,100,100)

After running the code, you can see that half of the created rectangle has been cleared

In addition to the clear drawing here ,window Object also provides us with a method to clear the drawing . Is to reset the canvas width,canvas.width=canvas.width, This also clears the previous drawing .

原网站

版权声明
本文为[M78_ Domestic 007]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/204/202207231723551502.html

当前位置：网站首页>Canvas draw text and clear draw

Canvas draw text and clear draw

边栏推荐

猜你喜欢

随机推荐