canvas type=2d 画图

爱吃水果的白马

已于 2022-09-14 11:36:35 修改

阅读量374

点赞数

分类专栏：微信小程序文章标签： javascript 前端

于 2022-09-13 18:22:21 首次发布

本文链接：https://blog.csdn.net/qq_48957847/article/details/126838858

版权

这篇博客是作者的个人记录，主要分享了如何利用HTML5的canvas type=2d API来绘制圆形的方法。

摘要由CSDN通过智能技术生成

个人记录只能参考

index.wxml
<view class="new_ca">
  <canvas type="2d"  id="myCanvas"  style="width:{
   {canvasW}}px;height: {
   {canvasH}}px;"  ></canvas>
</view>
<button type="primary" bindtap="getTempFilePath">保存</button>

data: {
   
    canvasW:360,
    canvasH:500,
    canvas:''
  },
  drawNew(step){
   
    const query = wx.createSelectorQuery().in(this);
    query.select('#myCanvas')
      .fields({
    node: true , size: true})
      .exec(this.init.bind(this))
  },
  init(res){
   
    console.log(res);
    const canvas = res[0].node
    this.data.canvas = canvas
    const ctx = canvas.getContext('2d');
    const dpr = wx.getSystemInfoSync().pixelRatio // 像素比
    canvas.width = res[0].width * dpr
    canvas.height = res[0].height * dpr
    ctx.scale(dpr, dpr)

    // this.canvasDraw(canvas,ctx);//向画布载入图片的方法
    let img = canvas.createImage();//创建img对象
    img.src = "../../img/canvasBeiJing.png";
    img.onload = () => {
   
          //img.complete表示图片是否加载完成，结果返回true和false;
          console.log(img.complete);<