当前位置：网站首页>《canvas》之第6章 图片操作

《canvas》之第6章 图片操作

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

《canvas》之第6章 图片操作

第6章 图片操作

6.1 图片操作简介

将图片导入canvas进行平铺、切割、像素处理等操作。

6.2 绘制图片

drawImage()方法将图片显示出来。

6.2.1 drawImage(image, dx, dy)

  • image，页面中img元素，或者JavaScript创建的Image对象，或者另一个canvas对象（document.createElement(“canvas”)）。

  • dx，dy，左上角横纵坐标。

  • JavaScript创建Image对象

<!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"); //创建image对象 var image = new Image(); image.src = "images/princess.png"; //图片载入完全后，才能开始绘制图片 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>
  • 页面中img元素
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css"> /*隐藏HTML中的img元素*/ #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定义图片的大小，会进行缩放。

<!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)

将源图片sx，sy，sw，sh部分裁剪后，缩放到canvas的dx，dy，dw，dh处显示。

<!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 平铺图片

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

type取值

参数值说明
repeat水平垂直方向平铺，默认
repeat-x水平方向平铺
repeat-y垂直方向平铺
no-repeat只显示一次，不平铺
  • 平铺图片
<!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>
  • 平铺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"); //创建canvas元素 var bgCanvas = document.createElement("canvas"); bgCanvas.width = 20; bgCanvas.height = 20; //在新创建的canvas中画一个圆 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(); //平铺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 切割图片

cxt.clip();

clip()方法切割图片步骤：

  1. 绘制基本图形。
  2. 使用clip()方法。
  3. 绘制图片。
  • 切割圆形
<!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"); //第1步，绘制基本图形，用来切割 cxt.beginPath(); cxt.arc(70, 70, 50, 0, 360 * Math.PI / 180, true); cxt.closePath(); cxt.stroke(); //第2步，使用clip()方法，使得切割区域为上面绘制的基本图形 cxt.clip(); //第3步，绘制一张图片 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>
  • 切割三角形
<!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"); //第1步，绘制基本图形，用来切割 cxt.moveTo(20, 70); cxt.lineTo(120, 20); cxt.lineTo(120, 70); cxt.lineTo(20, 70); cxt.stroke(); //第2步，使用clip()方法，使得切割区域为上面绘制的基本图形 cxt.clip(); //第3步，绘制一张图片 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 深入图片操作

图片结合文字或图形，实现特殊效果。

  • 图片结合文字
<!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"); //创建image对象 var image = new Image(); image.src = "images/princess.png"; image.onload = function () {
       var text = "绿叶学习网"; cxt.font = "bold 22px 微软雅黑"; 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>
  • 图片结合图形
<!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"); //创建image对象 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>
原网站

版权声明
本文为[yxqq378287007]所创，转载请带上原文链接，感谢
https://blog.csdn.net/oqqyx1234567/article/details/125362873

边栏推荐

猜你喜欢

随机推荐