canvas 简单的绘制H5页面生成图片

最新推荐文章于 2025-05-17 06:18:40 发布

黑牛E

最新推荐文章于 2025-05-17 06:18:40 发布

阅读量9.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： canvas 文章标签： canvas生成图片 canvas

本文链接：https://blog.youkuaiyun.com/cxf1992/article/details/78718336

canvas 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas元素结合JavaScript进行绘图，并将绘制的内容转换成图片格式展示出来。通过设定canvas与浏览器窗口等宽高等宽，实现了自适应布局，并通过加载背景图片和按钮图标来丰富画布内容，最终将canvas内容导出为PNG格式。

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

HTML 代码

<div>
   <canvas id="canvas"></canvas>
</div>
<div>
    <img id="img" style="width: 100%;height: 100%" src="#" alt="">
</div>

JS代码，需要引入JQ

//指定canvas同页面长宽一样
var H = $(window).height();
var W = $(window).width();
$("#canvas").attr({'height':H,'width':W});
//设置canvas跟屏幕一样大小


//canvas绘图
function draw(){
    var canvas = document.getElementById('canvas');
    var h = H/100;//百分1的高
    var w = W/100;//百分1的宽
    var ctx = canvas.getContext("2d");

    var imgBg = new Image();
    imgBg.src = 'images/page1.jpg'
    var img1 = new Image();
    img1.src = 'images/btn.png';
    window.onload = function(){
        ctx.drawImage(imgBg,0,0,750,1208,0,0,W,H)
        ctx.drawImage(img1,0,0,163,38,35*w,90*h,30*w,30*w/3.9)//设置图片比例和位置,匹配手机屏幕

        //绘制简单的文字
        ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color
        ctx.font="40px Arial";
        ctx.fillText("皇马聊天室",100,300);

        //生成的data的路径,可以通过php生成图片存到数据库,单存data路径不合适,高清图片情况下会出现图片的残缺
        var srccc = canvas.toDataURL("image/png");
        $("#img").attr("src",srccc);
    }
}

draw();