在canvas中使用图像

最新推荐文章于 2024-05-10 10:10:22 发布

漂流の少年

最新推荐文章于 2024-05-10 10:10:22 发布

阅读量3.9k

点赞数 1

分类专栏： HTML+CSS+JavaScript 文章标签： js canvas html5

本文链接：https://blog.csdn.net/YINZHE__/article/details/118404491

版权

HTML+CSS+JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

在canvas中导入图像步骤

①确定图像来源

②使用drawImage()方法将图像绘制到canvas中

var img=new Image(); //使用脚本创建一个新的image对象

img.οnlοad=function(){ //使用onload事件一边装载图像，一边执行drawImage函数

//此处放置drawImage的语句

}

img.src="...";

drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

img：规定要使用的图像

sx,sy:可选，开始剪切的坐标位置

swidth，sheight:可选，被剪切图像的宽度和高度

x,y:在画布上放置图像的坐标

width，height：要使用的图像的宽度，高度。

1.定位图像

images/1.jpg（480x300）

drawImage（img,x,y）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<canvas id="canvas" width="300" height="200" style="border: solid 1px #999;"></canvas>
<script>
    draw();
    function draw() {
        var ctx=document.getElementById('canvas').getContext('2d');
        var img=new Image();
        img.onload=function () {
            ctx.drawImage(img,0,0);
        }
        img.src='images/1.jpg';
    }
</script>
</body>
</html>

2.缩放图像

drawImage(img,x,y,width,height)

function draw() {
        var ctx=document.getElementById('canvas').getContext('2d');
        var img=new Image();
        img.onload=function () {
            ctx.drawImage(img,-80,-50,400,250);
        }
        img.src='images/1.jpg';
    }

3.裁剪图像

function draw() {
        var ctx=document.getElementById('canvas').getContext('2d');
        var img=new Image();
        img.onload=function () {
            ctx.drawImage(img,20,20,300,200,0,0,480,300);
        }
        img.src='images/1.jpg';
    }

4.平铺图像

图像平铺就是让图像填满画布

①使用drawImage()方法

function draw() {
        var canvas=document.getElementById('canvas');
        var ctx=canvas.getContext('2d');
        var img=new Image();
        img.src='images/1.jpg';
        img.onload=function () {
            var scale=4;                //平铺比例
            var n1=img.width/scale;     //缩小后图像的宽度
            var n2=img.height/scale;    //缩小后图像的高度
            var n3=canvas.width/n1;     //平铺横向个数
            var n4=canvas.height/n2;     //平铺纵向个数
            for(var i=0;i<n3;i++)
                for(var j=0;j<n4;j++)
                    ctx.drawImage(img,i*n1,j*n2,n1,n2);
        }
    }

②使用createPattern(img,type)方法

参数type取值

no-repeat:不平铺

repeat-x:横方向平铺

repeat-y:纵方向平铺

repeat:全方向平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<canvas id="canvas" width="960" height="600" style="border: solid 1px #999;"></canvas>
<script>
    draw();
    function draw() {
        var canvas=document.getElementById('canvas');
        var ctx=canvas.getContext('2d');
        var img=new Image();
        img.src='images/1.jpg';
        img.onload=function () {
            var ptn=ctx.createPattern(img,'repeat');//创建填充样式
            ctx.fillStyle=ptn;              //指定填充样式
            ctx.fillRect(0,0,960,600);      //填充画布
        }
    }
</script>
</body>
</html>

漂流の少年

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
在canvas中使用图像

在canvas中导入图像步骤①确定图像来源②使用drawImage()方法将图像绘制到canvas中var img=new Image(); //使用脚本创建一个新的image对象img.οnlοad=function(){ //使用onload事件一边装载图像，一边执行drawImage函数//此处放置drawImage的语句}img.src="...";drawImage(img,sx,sy,swidth,s...
复制链接

扫一扫