请使用canvas绘制，画布尺寸为200px_200px，在画布中添加一个60 _ 60的黄色正方形并在画布顶部添加一行黑色文字“canvas” 将canvas的内容输出图片设置到img元素上

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        #canvasId {
            background-color: red;
        }
    </style>
  </head>
  <body>
      <div>Canvas</div>
      <canvas id="canvasId" width="200" height="200"></canvas>
        <img id="imgId" src="" />
        <script>
            var c=document.getElementById("canvasId");
            var ctx=c.getContext("2d");
            ctx.fillStyle="yellow";
            ctx.fillRect(0,0,60,60);
            var cimg = function() {
                var imgSrc = document.getElementById("canvasId").toDataURL("image/png");
                document.getElementById("imgId").src = imgSrc;
                console.log(imgSrc);
            }	
            cimg();
        </script>
            
</html>

请使用canvas绘制，画布尺寸为200px_200px，在画布中添加一个60 _ 60的黄色正方形 并在画布顶部添加一行黑色文字“canvas” 将canvas的内容输出图片设置到img元素上

猜你喜欢

请使用canvas绘制，画布尺寸为200px_200px，在画布中添加一个60 _ 60的黄色正方形并在画布顶部添加一行黑色文字“canvas” 将canvas的内容输出图片设置到img元素上