当前位置：网站首页>Chapter 11 of canvas canvas status

Chapter 11 of canvas canvas status

2022-06-29 14:38:00 【yxqq378287007】

《canvas》 The first 11 Chapter canvas state

The first 11 Chapter canvas state

The first 11 Chapter canvas state

11.1 What is state

canvas Based on state （strokeStyle、fillStyle、lineWidth etc. ） draw （stroke()、fill()） graphics .

When the status value changes ：

Use beginPath() Start a new path , Use the new status value .
not used beginPath() Start a new path , The latter value overrides the former value .

save() Save current state ,restore() Restore the previously saved state , Usually used in pairs .

11.2 clip() Method

Basic drawing area , then clip() shear , After the drawing exceeds the cutting area , Will not show .

cxt.clip();

clip() I won't support it strokeRect() and fillRect(), Use rect() Instead of .

Shear circle

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // Draw a “ Stroke circle ”, The center of the circle is （50,50）, The radius is 40 cxt.beginPath(); cxt.arc(50, 50, 40, 0, 360 * Math.PI / 180, true); cxt.closePath(); //cxt.strokeStyle = "HotPink"; //cxt.stroke(); cxt.fillStyle = "HotPink"; cxt.fill(); // Use clip(), bring “ Stroke circle ” Become a shear area  cxt.clip(); // Draw a “ Filled rectangle ” cxt.beginPath(); cxt.fillStyle = "#66CCFF"; cxt.fillRect(50, 50, 100, 80); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

Cut rectangle

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // Draw a “ Filled rectangle ” cxt.beginPath(); cxt.rect(20, 20, 100, 80); cxt.strokeStyle = " HotPink"; cxt.stroke(); //cxt.strokeRect(20, 20, 100, 80); //strokeRect() Yes bug cxt.clip(); // Draw a “ Stroke circle ”, The center of the circle is （120,60）, The radius is 40 cxt.beginPath(); cxt.arc(120, 60, 40, 0, 360 * Math.PI / 180, true); cxt.closePath(); cxt.fillStyle = " #66CCFF"; cxt.fill(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

11.3 save() Methods and restore() Method

Suitable for occasion ：

Cut graphics or pictures .
The shape or picture is distorted .
Status attribute change .
fillStyle、font、global Alpha、globalCompositeOperation、lineCap、lineJoin、lineWidth、miterLimit、shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY、strokeStyle、textAlign、textBaseLine.

11.3.1 Cut graphics or pictures

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); //save() Save state  cxt.save(); // Use clip() Method to specify a circular cutting area  cxt.beginPath(); cxt.arc(70, 70, 50, 0, 360 * Math.PI / 180, true); cxt.closePath(); cxt.stroke(); cxt.clip(); // Draw a picture  var image = new Image(); image.src = "images/princess.png"; image.onload = function () {
       cxt.drawImage(image, 10, 20); } $$("btn").onclick = function () {
       //restore() Restore the state  cxt.restore(); // Empty the canvas  cxt.clearRect(0, 0, cnv.width, cnv.height); // Draw a new picture  var image = new Image(); image.src = "images/flower.png"; image.onload = function () {
       cxt.drawImage(image, 10, 20); } } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="160" style="border:1px dashed gray;"></canvas><br />
    <input id="btn" type="button" value=" Draw a new map " />
</body>
</html>

11.3.2 The shape or picture is distorted

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.save(); cxt.translate(30, 30); cxt.fillStyle = "HotPink"; cxt.fillRect(0, 0, 100, 50); cxt.restore(); cxt.translate(60, 60); cxt.fillStyle = "LightSkyBlue"; cxt.fillRect(0, 0, 100, 50); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

11.3.3 Changes in state properties

Fill properties ：fillStyle.
Stroke properties ：strokeStyle.
Line effects ：lineCap、lineJoin、lineWidth、miterLimit.
Text effect ：font、textAlign、textBaseline.
shadows ：shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY.
Global properties ：globalAlpha、globalCompositeOperation.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var text = " Green leaf learning network "; cxt.font = "bold 20px  Microsoft YaHei "; cxt.fillStyle = "HotPink"; cxt.save(); //save() Save state  cxt.fillText(text, 50, 40); cxt.fillStyle = "LightSkyBlue "; cxt.fillText(text, 50, 80); cxt.restore(); //restore() Restore the state  cxt.fillText(text, 50, 120); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>