HTML5——Canvas_09之【使用图像】

最新推荐文章于 2025-01-24 15:32:40 发布

Superstatus

最新推荐文章于 2025-01-24 15:32:40 发布

阅读量184

点赞数

CC 4.0 BY-SA版权

分类专栏： Html5 Canvas 文章标签： Canvas

本文链接：https://blog.youkuaiyun.com/Superstatus/article/details/80566130

Html5 同时被 2 个专栏收录

15 篇文章

订阅专栏

Canvas

9 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas API进行图像绘制的方法。通过JavaScript代码实现了图像的基本填充及多次缩放绘制，展示了如何加载图像并利用drawImage方法进行不同位置与尺寸的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>使用图像</title>
    
    <script>
        function draw(id){
            var canvas=document.getElementById(id);
            var context=canvas.getContext("2d");
            context.fillStyle="#eeeeef";
            content.fillRect(0,0,500,500);
            image=new Image();
            image.src="ic_laucher.png";
            image.onload=function(){
                //重点
                drawImage(content,image);
            }
       }

       function  drawImage(content,image){
           //drawImage,这个方法是系统自带的
           content.drawImage(image,0,0,200,200);
           content.drawImage(image,270,270,380,380,230,230,100,100);
       }
    </script>
    
    
</head>

<body onload="draw("canvas");">
   <canvas id="canvas" width="500" height="500"></canvas>
</body>

</html>