html5 canvas制作的图片如何下载？并且图片可以是圆角矩形而不仅仅是矩形？答案

【问题标题】：How to download the picture made by html5 canvas? And the picture can be a round-corner rectangle rather than just a rectangle?html5 canvas制作的图片如何下载？并且图片可以是圆角矩形而不仅仅是矩形？
【发布时间】：2018-06-14 03:06:29
【问题描述】：

图片 1 是用画布创建的图片。图2是我下载的图片。我不知道为什么图片的形状会变回矩形。我希望它可以和我在网页上看到的一样形状（图1）。感谢您的帮助！！！！

Picture 1 Picture 2

这是我用来在画布上绘制图片并将画布转换为图像的代码。

<!DOCTYPE html>
<html>

<head>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
</head>

<body>

        <a id="final" href="#" class="btn btn-success btn_lg">Hello<img src = "contacts.png" alt= "your image" width="30" height="30" />  </a> 
        

        <img id="scream" width="220" height="277"
        src="contacts.png" alt="contacts">
        
        <p>Canvas:</p>
        
      <canvas id="myCanvas" width="240" height="297"
    style="border-radius: 15px;">
        Your browser does not support the HTML5 canvas tag.
        </canvas> 
       <style>
       
     
       </style>
    

        <script>
          
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
 ctx.font = "30px Arial";
ctx.fillText("Hello World",70,260);
ctx.fillStyle="#0000ff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
        window.onload = function() {
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            var img = document.getElementById("scream");
           ctx.drawImage(img, 10, 10);
        };

function download() {
     var canvas = document.getElementById('myCanvas');
    dataUrl = canvas.toDataURL();
    imageFoo = document.createElement('img');
imageFoo.src = dataUrl;
// Style your image here
imageFoo.style.width = '100px';
imageFoo.style.height = '100px';
imageFoo.style.borderRadius= "12px";

document.body.appendChild(imageFoo);

【问题讨论】：

因为你用 css 改变了它——它改变了它在浏览器中的显示方式，而不是源数据（你下载的）。
如何在源数据中更改？我需要在画布上画一个圆角矩形吗？

标签： javascript canvas

【解决方案1】：

请看下面的代码：

var mctx = document.getElementById( 'rounded-rect' ).getContext( '2d' );

function roundRect( ctx, x, y, width, height, radius ) {
  if ( typeof radius === 'undefined' ) radius = 5;

  ctx.beginPath();
  ctx.moveTo( x + radius, y );
  ctx.lineTo( x + width - radius, y );
  ctx.quadraticCurveTo( x + width, y, x + width, y + radius );
  ctx.lineTo( x + width, y + height - radius );
  ctx.quadraticCurveTo( x + width, y + height, x + width - radius, y + height );
  ctx.lineTo( x + radius, y + height );
  ctx.quadraticCurveTo( x, y + height, x, y + height - radius );
  ctx.lineTo( x, y + radius );
  ctx.quadraticCurveTo( x, y, x + radius, y );
  ctx.closePath();
}

var img = new Image();
img.src = "https://unsplash.it/3000/3000/?random";

img.onload = function() {
    mctx.save();
    roundRect( mctx, 10, 10, 200, 200, 20 );
    mctx.clip();
    mctx.drawImage( img, 10, 10, 200, 200 );
    mctx.restore();
    roundRect( mctx, 10, 10, 200, 200, 20 );
    mctx.lineWidth = 2;
    mctx.stroke();
}

#download {
  float: left;
	cursor: pointer;
	color: #555;
	padding: 3px
}
#download:hover {
	color: #f00
}

&lt;canvas id="rounded-rect" width="300" height="300"&gt;&lt;/canvas&gt;

【讨论】：