《canvas》之第6章 图片操作

于 2022-06-24 14:00:00 发布
阅读量245 收藏
点赞数
分类专栏： canvas 学习 整理 文章标签： javascript 前端 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125362873
版权
整理 同时被 3 个专栏收录
181 篇文章 10 订阅
订阅专栏
学习
130 篇文章 4 订阅
订阅专栏
canvas
20 篇文章 3 订阅
订阅专栏

《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>
mali378287007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 CANVAS游戏开发实战（PDF和源代码）
05-07
第6章　开发“俄罗斯方块”游戏 / 138 6.1　游戏分析 / 138 6.2　必要的javascript知识 / 138 6.3　游戏标题画面显示 / 139 6.4　向游戏里添加方块 / 141 6.5　控制方块的移动 / 152 6.5.1　键盘事件 / 152 6.5.2　...
Android 2.0游戏开发实战宝典第7章源码
07-28
这一章可能会讲解如何使用OpenGL ES进行图形渲染，创建精灵（Sprite）和动画序列，以及如何利用Canvas和Bitmap进行2D绘图。 3. **物理引擎**：为了让游戏更真实，物理模拟是必不可少的。源码中可能包含了一个简单的...
HTML5(六)——Canvas 高级操作
前端人的博客
08-04 547
上一篇文章《HTML5(五)——Canvas API》介绍 canvas 绘制基本图形，这节开始介绍canvas的高级操作。 一、canvas 转换 canvas 转换常用的几种方法介绍，如下： 方法 描述 scale() 缩放当前绘图至更大或更小。 rotate() 旋转当前绘图。 translate() 重新映射画布上的 (0,0) 位置。
创建Image图像的几种方法
xingyyn78的博客
01-17 8704
创建Image图像的方式主要分三种，一是通过File文件创建Image图像，二是通过ImageIcon创建Image图像，三是通过Toolkit中的函数创建Image图像。  一、通过File文件创建Image图像 1、通过文件选择器选择文件,创建File文件,创建Image图像    Image images = new Image();      JFileChooser c
Canvas 使用、并画布写文字:strokeText()、fillText()
林中明月间丶
05-30 961
Canvas：&lt;style type="text/css"&gt; body{background: black;} #ca{background: #fff;} &lt;/style&gt; &lt;script type="text/javascript"&gt; window.onload = function(){ var oC = document.getElementByI...
一步步教你利用Canvas对图片进行处理
我的blog屋
04-17 2214
文章转载自：https://m.jb51.net/article/123995.htm 这篇文章主要给大家介绍了关于利用Canvas对图片进行处理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。 前言 Canvas，中文译为“画布”，HTML5中新增了<canvas>元素，可以结合JavaScript...
canvas画布加载图片 - Kaiqisan
Kaiqisan的博客
07-12 1万+
canvas画布加载图片 就是往画布里面添加一些本地的或者网络上的图片。从而使画布图文并茂。 关键代码 let image = new Image(): 这里新增一个图片对象，它是一个图像的载体。但通过console(image)打印可以得知，其实它是一个html里的img标签，所有它拥有img标签里面的所有属性。在canvas转化img标签的时候它也能够发挥作用。 所以下面主要讲述在canvas插入图片的时候会用到的属性，其他的就不再赘述，大家可以去官网查看具体教程 https://www.runoob.
疯狂Android讲义(第2版)源代码 第6章~第9章
02-11
第6章、Android应用的资源 6.1、资源的类型及存储方式： 6.2、使用字符串、颜色、尺寸资源： 6.3、数组资源： 6.4、使用Drawable资源：图片资源; StateListDrawable资源; LayerDrawable资源; ShapeDrawable资源;...
图片盖章程序(delphi源码）
08-25
这涉及到图像的编码和写入，Delphi提供了如TPaintBox的SaveToBitmap方法或者第三方库如FreeImage来进行图片的保存。 6. **DLL版本的实现**：除了exe版本，程序还提供了dll版本，意味着它作为一个动态库供其他程序...
Canvas 图片平铺设置
weixin_34273479的博客
04-11 450
/** * 图片平铺 */ function initDemo7(){ var canvas = document.getElementById("demo7"); if (!canvas) return; var context = canvas.getContext("2d"); var type = [ "no-repe...
canvas画图的一个坑
xfzztd的专栏
07-16 578
用canvas的drawImage接口显示一张图片，
在canvas中使用图像
我的博客
07-02 3965
在canvas中导入图像步骤 ①确定图像来源 ②使用drawImage()方法将图像绘制到canvas中 var img=new Image(); //使用脚本创建一个新的image对象 img.οnlοad=function(){ //使用onload事件一边装载图像，一边执行drawImage函数 //此处放置drawImage的语句 } img.src="..."; drawImage(img,sx,sy,swidth,s...
canvas 图像的平铺
php的绯闻女友
06-28 1386
所谓平铺，指的是用按一定比例缩小的图像填满画布。HTML5中通过调用画布上下文对象的createPattern方法实现图像平铺，该方法应用格式为：createPattern(image,type) 其中参数image为被平铺对象，type表示图像平铺方式。type可取值有四种。 类型 说明 no-repeat 不平铺图像 repeat-x 水平方向平铺图象 repeat-y 垂直方向平铺图像 repeat 全方向平铺图像 案例： <fi...
new Image()
ahwangzc的博客
11-26 3985
建立图像对象：图像对象名称=new Image([宽度],[高度]) 图像对象的属性：border complete height hspace lowsrc name src vspace width 图像对象的事件：onabort onerror onkeydown onkeypress onkeyup onload var img=new Image(); img.src="17.png"; img.onload=function(){alert("img is load.
js的 new image()用法
热门推荐
余百炼的博客
11-26 6万+
创建一个Image对象：var a=new Image();    定义Image对象的src: a.src=”xxx.gif”;    这样做就相当于给浏览器缓存了一张图片。 图像对象： 建立图像对象：图像对象名称=new Image([宽度],[高度]) 图像对象的属性： border complete height hspace lowsrc name src vspace width...
canvas 处理图像（上）
p1967914901的博客
06-11 1062
本文将介绍在 Canvas 中使用图像的知识，包括加载图像和处理图像中的单个像素。Canvas 的这个功能可以用来创建一些炫丽的效果。本文还将教会你一般图像处理的知识。canvas 高级功能（下）讲述了如何将画布导出为图像，将它保存到本地和与他人共享。现在，我们将学习如何实现完全相反的操作：将图像加载到画布中。介绍这个功能的主要原因是，它使我们能够用2D渲染上下文方法对原本不是在画布中创建的图像进行处理。我们还可以使用几种特殊的像素处理 方法，对图像执行一些有趣的特殊操作，这将在下面介绍。将图像加载到画布中
canvas和image互相转换
LaZy、烟火的博客
05-09 5930
转载：http://www.cnblogs.com/sapho/p/6143819.html1. 把img转换为canvas对象复制代码 function convertImageToCanvas(image){ //创建canvas DOM对象,并设置其宽高和图片一样 var canvas = document.createElement("canvas"); canvas.
canvas生成图片
最新发布
09-14
要将canvas生成图片，可以使用canvas提供的toDataURL()方法。...最后，通过设置link元素的download属性为"canvas-image.png"，并使用link.click()方法触发下载操作，即可将canvas生成的图片保存为本地图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值