当前位置：网站首页>Chapter 6 picture operation of canvas

Chapter 6 picture operation of canvas

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

《canvas》 The first 6 Chapter Picture operation

The first 6 Chapter Picture operation

The first 6 Chapter Picture operation

6.1 Introduction to picture operation

Import pictures into canvas Tile 、 cutting 、 Pixel processing and other operations .

6.2 Drawing pictures

drawImage() Method to display the picture .

6.2.1 drawImage(image, dx, dy)

image, On the page img Elements , perhaps JavaScript Created Image object , Or another canvas object （document.createElement(“canvas”)）.
dx,dy, Horizontal and vertical coordinates of the upper left corner .
JavaScript establish Image object

<!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"); // establish image object  var image = new Image(); image.src = "images/princess.png"; // After the picture is loaded completely , To start drawing pictures  image.onload = function () {
       cxt.drawImage(image, 40, 20); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

On the page img Elements

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css"> /* hide HTML Medium img Elements */ #pic {
       display: none; } </style>
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var image = document.getElementById("pic"); cxt.drawImage(image, 40, 20); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
    <img id="pic" src="images/princess.png" alt="" />
</body>
</html>

6.2.2 drawImage(image, dx, dy, dw, dh)

dw,dh Define the size of the picture , Will zoom .

<!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 image = new Image(); image.src = "images/princess.png"; image.onload = function () {
       cxt.drawImage(image, 40, 20, 120+60, 60); } } </script>
</head>
<body>
    <canvas id="canvas" width="400" height="300" style="border:1px dashed gray;"></canvas>
</body>
</html>

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

Add source picture sx,sy,sw,sh After partial cutting , Zoom to canvas Of dx,dy,dw,dh Show .

<!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 image = new Image(); image.src = "images/princess.png"; image.onload = function () {
       cxt.drawImage(image, 0, 0, 80, 80, 40, 20, 80, 80); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

6.3 Tile picture

var pattern = cxt.createPattern(image, "type");
cxt.fillStyle = pattern;
cxt.fillRect();

type Value

Parameter values	explain
repeat	Tile horizontally and vertically , Default
repeat-x	Tile horizontally
repeat-y	Tile vertically
no-repeat	Show only once , Don't spread

Tile picture

<!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 myImg = new Image(); myImg.src = "images/flower.png"; myImg.onload = function () {
       var pattern = cxt.createPattern(myImg, "repeat"); cxt.fillStyle = pattern; cxt.fillRect(0, 0, cnv.width, cnv.height); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

tile canvas

<!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"); // establish canvas Elements  var bgCanvas = document.createElement("canvas"); bgCanvas.width = 20; bgCanvas.height = 20; // In the newly created canvas Draw a circle in  var bgCxt = bgCanvas.getContext("2d"); bgCxt.beginPath(); bgCxt.arc(10, 10, 10, 0, 360 * Math.PI / 180, true); bgCxt.closePath(); bgCxt.fillStyle = "HotPink"; bgCxt.fill(); // tile canvas var pattern = cxt.createPattern(bgCanvas, "repeat-x"); cxt.fillStyle = pattern; cxt.fillRect(0, 0, 200, 200); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="160" style="border:1px dashed gray;"></canvas>
</body>
</html>

6.4 Cut the picture

cxt.clip();

clip() Method to cut a picture ：

Draw basic figures .
Use clip() Method .
Drawing pictures .

Cut a 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"); // The first 1 Step , Draw basic figures , Used to cut  cxt.beginPath(); cxt.arc(70, 70, 50, 0, 360 * Math.PI / 180, true); cxt.closePath(); cxt.stroke(); // The first 2 Step , Use clip() Method , Make the cutting area the basic figure drawn above  cxt.clip(); // The first 3 Step , Draw a picture  var image = new Image(); image.src = "images/princess.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>
</body>
</html>

Cut a triangle

<!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"); // The first 1 Step , Draw basic figures , Used to cut  cxt.moveTo(20, 70); cxt.lineTo(120, 20); cxt.lineTo(120, 70); cxt.lineTo(20, 70); cxt.stroke(); // The first 2 Step , Use clip() Method , Make the cutting area the basic figure drawn above  cxt.clip(); // The first 3 Step , Draw a picture  var image = new Image(); image.src = "images/princess.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>
</body>
</html>

6.5 Drill down picture operation

Pictures combined with text or graphics , Achieve special effects .

Picture combined with text

<!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"); // establish image object  var image = new Image(); image.src = "images/princess.png"; image.onload = function () {
       var text = " Green leaf learning network "; cxt.font = "bold 22px  Microsoft YaHei "; var pattern = cxt.createPattern(image, "no-repeat"); cxt.fillStyle = pattern; cxt.fillText(text, 10, 50); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

Pictures combined with graphics

<!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"); // establish image object  var image = new Image(); image.src = "images/princess.png"; image.onload = function () {
       cxt.beginPath(); cxt.arc(50, 50, 50, 0, 360 * Math.PI / 180, false); cxt.closePath(); var pattern = cxt.createPattern(image, "no-repeat"); cxt.fillStyle = pattern; cxt.fill(); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>