当前位置：网站首页>《canvas》之第11章 canvas状态

《canvas》之第11章 canvas状态

2022-06-29 13:55:00 【yxqq378287007】

《canvas》之第11章 canvas状态

第11章 canvas状态

第11章 canvas状态

11.1 什么是状态

canvas基于状态（strokeStyle、fillStyle、lineWidth等）绘制（stroke()、fill()）图形。

状态值改变时：

使用beginPath()开始新路径，使用新的状态值。
未使用beginPath()开始新路径，后面值覆盖前面值。

save()保存当前状态，restore()恢复之前保存的状态，一般成对使用。

11.2 clip()方法

基本图形绘制区域，然后clip()剪切，后面绘制图形超出剪切区域后，不会显示。

cxt.clip();

clip()不支持strokeRect()和fillRect()，使用rect()代替。

剪切圆

<!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"); //绘制一个“描边圆”，圆心为（50，50），半径为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(); //使用clip()，使得“描边圆”成为一个剪切区域 cxt.clip(); //绘制一个“填充矩形” 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>

剪切矩形

<!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.beginPath(); cxt.rect(20, 20, 100, 80); cxt.strokeStyle = " HotPink"; cxt.stroke(); //cxt.strokeRect(20, 20, 100, 80); //strokeRect()有bug cxt.clip(); //绘制一个“描边圆”，圆心为（120，60），半径为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()方法和restore()方法

适合场合：

图形或图片剪切。
图形或图片变形。
状态属性改变。
fillStyle、font、global Alpha、globalCompositeOperation、lineCap、lineJoin、lineWidth、miterLimit、shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY、strokeStyle、textAlign、textBaseLine。

11.3.1 图形或图片剪切

<!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()保存状态 cxt.save(); //使用clip()方法指定一个圆形的剪切区域 cxt.beginPath(); cxt.arc(70, 70, 50, 0, 360 * Math.PI / 180, true); cxt.closePath(); cxt.stroke(); cxt.clip(); //绘制一张图片 var image = new Image(); image.src = "images/princess.png"; image.onload = function () {
       cxt.drawImage(image, 10, 20); } $$("btn").onclick = function () {
       //restore()恢复状态 cxt.restore(); //清空画布 cxt.clearRect(0, 0, cnv.width, cnv.height); //绘制一张新图片 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="绘制新图" />
</body>
</html>

11.3.2 图形或图片变形

<!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 状态属性的改变

填充属性：fillStyle。
描边属性：strokeStyle。
线条效果：lineCap、lineJoin、lineWidth、miterLimit。
文本效果：font、textAlign、textBaseline。
阴影效果：shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY。
全局属性：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 = "绿叶学习网"; cxt.font = "bold 20px 微软雅黑"; cxt.fillStyle = "HotPink"; cxt.save(); //save()保存状态 cxt.fillText(text, 50, 40); cxt.fillStyle = "LightSkyBlue "; cxt.fillText(text, 50, 80); cxt.restore(); //restore()恢复状态 cxt.fillText(text, 50, 120); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>