ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

小程序canvas绘图最新

2022-01-21 11:33:13  阅读:166  来源: 互联网

标签:canvas const dpr res pic 程序 绘图 ctx


 const query = wx.createSelectorQuery()             query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {                 console.log(res)                 const canvas = res[0].node;                 const dpr = wx.getSystemInfoSync().pixelRatio;                 console.log(dpr)                 canvas.width = res[0].width * dpr                 canvas.height = res[0].height * dpr                 const ctx = canvas.getContext('2d')                 ctx.scale(dpr, dpr)                //canvas.createImage()在微信版本7.0.20会有报错,进入不了onload。 但是在7.0.21已经修复。                 let pic = canvas.createImage();                 ctx.fillRect(0, 0, 100, 100)                 pic.src = "http://ddsds.sds.cn/commdddunityDocs/202201/0f2fb2eed555431eb987c288dd41bd87.png"; //可以是本地,也可以是网络图片                 console.log(pic)                 pic.onload = () => {                 //不要用官方示例的图片路径,包括网上在这之前所有的文档/示例里是地址链接的都不要看了,要用image对象!                     ctx.drawImage(pic,0, 0, 150, 150);                 }             })   <canvas style="width: 300px;height: 300px;" type="2d" id="myCanvas"></canvas>

标签:canvas,const,dpr,res,pic,程序,绘图,ctx
来源: https://www.cnblogs.com/sjruxe/p/15829572.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有