canvas绘制

已于 2022-05-27 17:09:16 修改
阅读量211 收藏
点赞数
分类专栏： 日常记录 文章标签： canvas
于 2019-01-08 18:23:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43704691/article/details/86089733
版权

编写文本

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>canvas编写文本</title>
    <style type="text/css">
      canvas {
        border: 1px solid black;
        margin: 50px auto;
      }
    </style>
  </head>
  <body>
    <!-- canvas有兼容性问题,标签不识别时会读取里面内容 -->
    <canvas
      id="myCanvas"
      width="500"
      height="500"
      style="border:1px solid #000000;"
    >对不起，你的浏览器版本过低，点击<a href="#">下载</a>
    </canvas>
  </body>
  <script>
    window.onload = function() {
      var c = document.getElementById("myCanvas");
      //console.log(c);
      var ctx = c.getContext("2d");
      //绘制字体
      ctx.font = "30px Arial";
      //绘制空心字
      ctx.strokeText("年少的欢喜是你", 50, 100);
      //绘制实心字
      ctx.fillStyle = "dimgray";
      ctx.fillText("你是喜欢的少年", 50, 230);
      //绘制文本水平居中 (文本定位属性 textAlign)
      // ctx.textAlign="center"
      // ctx.fillText("你是喜欢的少年", canvas盒子的宽度/2, 230);
    };
  </script>
</html>
//注意点:谷歌浏览器要加载完之后才能使用canvas,所以js要写在window.οnlοad=function(){}中

绘制图片

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>canvas图片</title>
    <style type="text/css">
      canvas {
        /* border: 1px solid black; */
      }
    </style>
  </head>
  <body>
    <!-- canvas有兼容性问题,标签不识别时会读取里面内容 -->
    <canvas id="myCanvas" width="500" height="500">对不起，你的浏览器版本过低，点击<a href="#">下载</a></canvas>
    <img
      style="display:none;"
      src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547028784732&di=77ff5804bf424d6d0cb0c175b2ff7f91&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Fface%2F0f27137c1993f1a4034bb83349fb65601b7b420e.jpg"
      alt=""
    />
    <img style="display:none;" src="./images/timg.png" alt="" />
  </body>
  <script>
    window.onload = function() {
      var imgUrl = document.getElementsByTagName("img")[0].src; // 页面上已经加载了图片
      // 页面没有图片元素的要先加载图片才能绘制
      // const img = new Image()
	  // img.setAttribute('crossOrigin', 'Anonymous')
	  // img.src = src // src-图片地址
	
	  // img.onload = () => {
	  //   console.warn(src, '加载图片完成')
	  //   resolve(img)
	  // }
	  // img.onerror = (err) => {
	  //   console.warn(src, '加载图片失败')
	  //   reject(err)
	  // }
      var c = document.getElementById("myCanvas");
      //   console.log(c);
      var ctx = c.getContext("2d");
      // var img = new Image();
      // img.onload = function() {
      //   //图片平铺
      //   for (var i = 0; i < 4; i++) {
      //     for (var j = 0; j < 3; j++) {
      //       ctx.drawImage(img, j * 150, i * 150, 150, 150);
      //     }
      //   }
      // };
      // img.src = imgUrl;
      
      //相框制作:有层级关系,后画的图片在最上层
      // 相框
      ctx.drawImage(document.getElementsByTagName("img")[1], 0, 0,500,500);
      // 照片
      ctx.drawImage(document.getElementsByTagName("img")[0], 130, 150, 250, 250);      
    };
	//ctx.drawImage(所需绘制的图片, 图片在画布中的位置X, 图片在画布中的位置Y); //三个参数即可,可默认图片大小为绘制大小
    //ctx.drawImage(所需绘制的图片, 图片在画布中的位置X, 图片在画布中的位置Y, 绘制大小width, 绘制大小height);
    //ctx.drawImage(所需绘制的图片, 图片在画布中的位置X, 图片在画布中的位置Y, 绘制大小width, 绘制大小height, 图片裁剪起始位置X, 图片裁剪起始位置Y, 裁剪图片的宽度,裁剪图片的高度);//图片裁剪时使用
  </script>
</html>

小程序组件调用

ready() {
    //var pages = getCurrentPages()
    //var currentPage = pages[pages.length - 1]
    //var url = currentPage.route //当前页面路径
    //var options = currentPage.options //当前页面参数
    //console.log(url, 'url', options,'options')

    this.ctx = wx.createCanvasContext('myCanvas', this) //组件中调用需要导入this

    // var windowWidth = wx.getSystemInfoSync().windowWidth;
    // var width = windowWidth * this.data.width / 750
    // var height = width * this.data.height / this.data.width
    // this.setData({
    //   width: width,
    //   height: height
    // })

    // this.drawNormalImg();
    this.drawDetailsImg();   
    
  },

小程序组件中保存canvas绘制图片

saveImg() {
      this.drawDetailsImg();
      wx.showLoading({
        title: '加载中',
      })
      this.ctx.draw(false, wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success(res) {
          wx.authorize({ //向用户发起授权请求
            scope: 'scope.writePhotosAlbum', //保存相册授权
            success: () => {
              wx.saveImageToPhotosAlbum({ //保存图片到系统相册
                filePath: res.tempFilePath,
                success: () => {
                  wx.hideLoading();
                  wx.showToast({
                    title: '图片保存成功'
                  })
                }
              })
            }
          })
        },
        fail: function (res) {
          console.log(res);
        }
      },this)); //同样需要导入this
    }

canvas特殊方法讲解

/* 以绘制分享海报图为例讲解 */
/* 1.beginPath() */
//开始一条路径，或重置当前的路径
//绘制网络图片时,一般是一个异步请求,需要保存之前全部路径,开始新的路径,所以需要重置(重新开始)一条新的路径时调用
//canvas中的绘制方法（如stroke,fill），都会以“上一次beginPath”之后的所有路径为基础进行绘制。
//绘制两条线时,如果找不到上一个beginPath(),会默认当一个路径重复绘制(不论你用moveTo()把画笔移动到哪里，只要不beginPath()，那你一直都是在画一条路径)
//fillRect与strokeRect,这种画出独立区域的函数，也不会打断当前的路径

/* 2.closePath() */
//创建从当前点到开始点的路径
//只是闭合当前的路径，从起点到现在的这个点形成一个闭合的回路
//并没有开启一个新路径

/* 3.save() */
//保存当前图像状态的一份拷贝
/* 4.restore() */
//将绘图状态置为保存值
//save()和restore()一般会一起使用,但是restore()的调用次数会远少于save(),每次save()会把当前绘画保存压入栈中,restore()会执行出栈操作
//以绘制圆形头像为例,先用save保存绘制的大圆,之后绘制小圆(剪切图像部分),绘制头像图片,使用restore恢复之前绘制状态

/* 5.clip() */
//从原始画布中剪切任意形状和尺寸

/* 6.measureText() */
//返回包含一个对象，该对象包含以像素计的指定字体宽度
//一般用于计算文本的宽度

/* 代码展示 */
drawNormalImg(){
      var that = this;
      let normal_img = that.data.normal_img;
      wx.getImageInfo({
        src: normal_img,
        success: res => {
          that.ctx.drawImage(res.path, 0, 0, that.data.width, that.data.height);
          that.ctx.save();
          that.ctx.beginPath();
          that.ctx.arc(164, 1502, 90, 0, 2 * Math.PI);
          that.ctx.fillStyle = "#fff";
          that.ctx.fill();
          that.ctx.save();
          that.ctx.beginPath();
          let image = that.data.avatarUrl;
          wx.getImageInfo({
            src: image,
            success: res => {
              that.ctx.arc(164, 1502, 81, 0, 2 * Math.PI);
              that.ctx.clip();
              let tempPath = res.path;
              that.ctx.drawImage(tempPath, 74, 1412, 180, 180);
              that.ctx.restore();

              that.ctx.setFontSize(40);
              that.ctx.setFillStyle('#999999');
              that.ctx.fillText('用户昵称有十个字的啊：', 84, 1648);
              that.ctx.save();
              that.ctx.setFillStyle('#333');
              that.ctx.font = "normal bold 58px 'Microsoft YaHei'";
              that.ctx.fillText('买农资 上大丰收', 84, 1726);
              that.ctx.save();
              that.ctx.beginPath();

              let img = that.data.ewmUrl;
              wx.getImageInfo({
                src: img,
                success: res => {
                  that.ctx.drawImage(res.path, 708, 1547, 292, 292);
                  that.ctx.restore();
                  that.ctx.draw();
                }
              });
            }
          })
        }
      });      
    },
    drawDetailsImg(){
      var that = this;
      var details_img = that.data.details_img;
      wx.getImageInfo({
        src: details_img,
        success: res => {
          that.ctx.drawImage(res.path, 0, 0, that.data.width, that.data.height);
          that.ctx.save();
          that.ctx.arc(135, 454, 89, 0, 2 * Math.PI);
          that.ctx.fillStyle = "#fff";
          that.ctx.fill();
          that.ctx.save();
          that.ctx.beginPath();
          let image = that.data.avatarUrl;
          wx.getImageInfo({
            src: image,
            success: res => {
              that.ctx.arc(135, 454, 81, 0, 2 * Math.PI);
              that.ctx.clip();
              let tempPath = res.path;
              that.ctx.drawImage(tempPath, 45, 364, 178, 178);
              that.ctx.restore();

              that.ctx.setFontSize(40);
              that.ctx.setFillStyle('#999999');
              that.ctx.fillText('用户昵称有十个字的啊：', 251, 424);
              that.ctx.save();
              that.ctx.setFillStyle('#333');
              that.ctx.font = "normal bold 54px 'Microsoft YaHei'";
              that.ctx.fillText('买农资 上大丰收', 251, 504);
              that.ctx.save();
              that.ctx.beginPath();

              let pro_img = that.data.proUrl;
              wx.getImageInfo({
                src: pro_img,
                success: res => {
                  that.ctx.drawImage(res.path, 90, 562, 899, 899);
                  that.ctx.restore();
                  that.ctx.setFillStyle('#FF5146');
                  that.ctx.font = "normal bold 54px 'Microsoft YaHei'";
                  that.ctx.fillText('￥', 53, 1559);
                  that.ctx.setFillStyle('#FF5146');
                  that.ctx.font = "normal bold 81px 'Microsoft YaHei'";
                  that.ctx.fillText('549', 104, 1559);
                  that.ctx.save();

                  that.ctx.setFillStyle('#999999');
                  that.ctx.font = "normal normal 45px 'Microsoft YaHei'";
                  that.ctx.fillText('￥999', 53, 1617);
                  var width = Math.floor(that.ctx.measureText('￥999').width); //获取划线价宽度
                  that.ctx.beginPath();
                  that.ctx.moveTo(53, 1600);//起始位置
                  that.ctx.lineTo(60 + width, 1600);//停止位置
                  that.ctx.lineWidth = 2;
                  that.ctx.strokeStyle = "#999999";
                  that.ctx.stroke();
                  that.ctx.save();

                  that.ctx.setFillStyle('#333');
                  that.ctx.font = "normal bold 54px 'Microsoft YaHei'";
                  var strArr = that.strSplit(that.data.pro_text, 550);
                  that.ctx.fillText(strArr[0], 53, 1700);
                  that.ctx.fillText(strArr[1], 53, 1766);
                  that.ctx.save();
                  that.ctx.beginPath();

                  let img = that.data.ewmUrl;
                  wx.getImageInfo({
                    src: img,
                    success: res => {
                      that.ctx.drawImage(res.path, 708, 1547, 292, 292);
                      that.ctx.restore();
                      that.ctx.draw();
                    }
                  });
                }
              });

            }
          })
        }
      });
      
    },
    strSplit(str,w){ //字符换行分段
      var temp = '';
      var row = [];
      for (var i = 0; i < str.split('').length; i++) {
        if (this.ctx.measureText(temp).width < w) {

        } else {
          row.push(temp);
          temp = "";
        }
        temp += str.split('')[i];
      }
      row.push(temp);
      return row;
    },

canvas绘制图片时获取定宽图片高

img.onload = () => {
   const ratio = img.height / img.width
   // halfWidth-需绘制图片宽度 halfHeight-等比缩放图片高度
   const halfHeight = ratio * halfWidth 
}
陶小橦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初识canvas
weixin_34268310的博客
10-13 67
HTML5 也出来一段时间了，带来了一些新的技术标准，例如 HTML5 里的 Canvas 标签，<canvas></canvas>，允许我们使用 Javascript 在 canvas 标签里绘制 2D 或 3D 图形和动画。下面就谈谈对 canvas 绘图的理解以及介绍其中一些使用过的方法，用一个条形进度条和一...
canvas初识与入门
29DCH的博客
10-07 385
HTML5&amp;amp;amp;amp;lt;canvas&amp;amp;amp;amp;gt;标签用于绘制图像（通过脚本，通常是 JavaScript）。 不过，&amp;amp;amp;amp;lt;canvas&amp;amp;amp;amp;gt;元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。 getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 可以参考菜鸟教程和W3C上面关于c
关于canvas的使用（超详细的canvas知识体系讲解）
adminsir0的博客
06-07 8698
canvas,js特效，图形绘制，路径绘制，图片绘制，动画效果，贝塞尔曲线
canvas学习（一）canvas宽高异常，fillStyle的使用，demo：黑客帝国代码雨plus
spray_wave的博客
09-07 597
首先一个小demo,来说明一下canvas简单的属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Document</title> </head> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;
[已解决]微信小程序 canvas 文字样式错乱问题
意外金喜
11-27 1万+
在微信小程序中使用canvas绘制海报的时候，发现有多种不同的样式文字时， 保存canvas内容为图片，出现各种文字样式错乱。 ------------------------------------------------------------------------------------ ----------------------------------------------...
vue+canvas绘制图形
01-09
首先，我们来看"vue+canvas绘制图形"这个主题。Vue组件是Vue.js的核心特性之一，它允许我们将UI拆分成独立、可复用的部分。在这个项目中，我们可以创建一个名为`Canvas.vue`的Vue组件，专门负责处理Canvas元素。在`...
canvas绘制多边形
08-31
本文将深入讲解如何使用`canvas`来绘制多边形，通过示例代码详细解析绘制过程。 首先，我们需要在HTML页面中创建一个`canvas`元素，指定其宽度和高度，以便为绘图提供足够的空间： ```html <canvas id="myCanvas" ...
使用canvas绘制钟表
11-06
本教程将详细介绍如何使用canvas绘制一个动态的钟表，这涉及到JavaScript和Canvas API的基础知识。 首先，我们需要在HTML页面中创建一个canvas元素，并设置其id以便在JavaScript中引用： ```html <canvas id=...
canvas绘制动态心电图
05-08
最后，提到的"CanvasXjt"可能是示例代码的文件名，可能包含一个完整的示例，展示了如何使用Canvas绘制动态心电图的步骤。如果需要深入学习，可以研究这个文件，理解其背后的逻辑和实现细节。 总的来说，使用Canvas...
Canvas绘制心电图
11-06
使用Canvas绘制心电图，我们可以创建自定义的可视化，用于教育、模拟或数据展示目的。 Canvas是HTML5的一个核心特性，它提供了一个二维绘图环境，允许开发者通过JavaScript代码动态地绘制图形。要绘制心电图，我们...
小程序canvas 2d 自定义字体
caihuawei123的博客
03-11 3344
开发工具：微信开发者工具 Stable 1.05.21020210 注意：目前canvas 2d 开发工具看不到效果，需要真机预览才可以看到效果 效果图： 下面是动态加载网络字体的api: 写的是一个全局加载的 // app.js App({ onLaunch() { //加载全局字体 for(let i =0;i<this.globalData.array.length;i++){ console.log(i) let obj = this
HTML5 canvas里的drawImage用法
小冯的博客
03-28 5055
关于canvas无法通过drawImage加载的原因 首先我们先来理解在html里图片的加载时是异步的。 （设置src本身是同步的，但是浏览器下载和显示图片是异步的。） 在资源还没有加载完成的时候就执行了drawImage 所以无法成功加载到画布当中。 因为图片是异步加载， 所以要加个onload事件 onload 事件会在页面或图像加载完成后立即发生。 先看正确代码： <p&gt...
微信小程序canvas把正方形图片绘制成圆形
热门推荐
qq_37942845的博客
04-23 1万+
在微信小程序里效果图： 直接代码： &lt;canvas style="width: 400px; height: 400px;border:1px solid red" canvas-id="firstCanvas"&gt;&lt;/canvas&gt; //index.js Page({ data: { image: { src: ...
Canvas 绘制方法过一遍
嗯...
12-15 921
Canvas 绘制的方法过一遍
前端JS利用canvas的drawImage()对图片进行压缩
我是谁的博客
05-27 8006
对于大尺寸图片的上传，在前端进行压缩除了省流量外，最大的意义是极大的提高了用户体验。 这种体验包括两方面： 1、由于上传图片尺寸比较小，因此上传速度会比较快，交互会更加流畅，同时大大降低了网络异常导致上传失败风险。 2、最重要的体验改进点：省略了图片的再加工成本。很多网站的图片上传功能都会对图片的大小进行限制，尤其是头像上传，限制5M或者2M以内是非常常见的。然后现在的数码设备拍摄功能都非常出众，...
canvas 绘制图片 - ctx.drawImage()
qq_44408319的博客
07-19 1万+
canvas绘制图片
用Python形象地解决酒缸分酒问题
人生苦短， 还不用Python？
09-09 785
问题提出 你有一个8升的酒坛，里面装满了酒，另外还有两个分别是5升和3升的空酒坛，3个酒坛都没有刻度，现在需要倒出正好4升的酒，需要怎么操作？ 从题目来看，我们需要把3个缸的酒倒来倒去，直到某个酒缸里面是4升酒。这个问题的解法很有趣，我们假设能装5升酒的坛子叫A，3升的坛子是B，8升的坛子是C，开始的时候我们可以先在A坛子里装满酒也可以先在B坛子装满酒（只装一部分我们是没办法知道是多少升的，没有用...
微信小程序 canvas圆角矩形的绘制
weixin_33807284的博客
08-22 1559
微信小程序允许对普通元素通过 border-radius的设置来进行圆角的绘制，但有时候在使用 canvas绘图的时候，也需要圆角，例如需要将页面上某块区域导出为图片下载到本地的时候，常用的解决方法就是使用 canvas将这块区域绘制出来，最后导出 canvas即可，但是 canvas没有直接提供圆角的绘制 api，所以需要 曲线救国 圆角矩形与一般矩形的区别在于，前者的四个角都是圆弧，所以只需...
canvas绘制二维码
最新发布
03-01
要使用Canvas绘制二维码，可以借助第三方库QRCode.js来生成二维码图像数据，然后将图像数据绘制到Canvas上。 以下是使用Canvas绘制二维码的骤： 1. 引入QRCode.js库：在HTML文件中引入QRCode.js库，可以通过CDN链接...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值