canvas绘画

<canvas canvas-id="iCanvas"  class="canvas-class"></canvas>

canvas绘制图片
小程序的操作

let _this=this;
let ctx = uni.createCanvasContext('iCanvas', _this);
//画图片 参数是（图片路径，定位x,定位y,宽，高）
ctx.drawImage("../../static/index/shareBgNew.png", 0*rpx, 0*rpx,840*rpx, 672*rpx);
//写文字，文字太长可以截取并省略号
ctx.font = "bold 30rpx Arial";
let str = _this.detailList.compInfo.abbr.length>7?(_this.detailList.compInfo.abbr.slice(0,7)+'...'):_this.detailList.compInfo.abbr;
ctx.setFillStyle("#8C8C8C");//字体颜色
ctx.fillText(str, 336*rpx,172*rpx);//设置文字的宽高
// 线条
ctx.setStrokeStyle('#000000');//线条颜色
ctx.setLineWidth(1 * rpx);//线条宽
ctx.moveTo(40 * rpx, 522 * rpx);//线条起点坐标
ctx.lineTo(800 * rpx, 522 * rpx);//线条终点坐标
//如果线条还有别的绘制或者是多边形的可以继续用lineTo加上坐标连接起来
ctx.stroke();//完成线条

//最后必须要有draw去绘制这个图片
ctx.draw(true);

非小程序的网页操作

//获取Canvas对象(画布)   
var canvas = document.getElementById("myCanvas");   
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   
if(canvas.getContext){     
    //获取对应的CanvasRenderingContext2D对象(画笔)   
    var ctx = canvas.getContext("2d");   
    
    //设置字体样式   
    ctx.font = "30px Courier New";   
    //设置字体填充颜色   
    ctx.fillStyle = "blue";   
    //从坐标点(50,50)开始绘制文字   
    ctx.fillText("CodePlayer+中文测试", 50, 50);   
}

canvas点击事件
通过canvas绘画出来的画布需要有些点击时间：
1.只监听整个canvas画布

canvas.onclick=function(e){//给canvas添加点击事件
e=e||event;//获取事件对象
//获取事件在canvas中发生的位置
var x=e.clientX-canvas.offsetLeft;
var y=e.clientY-canvas.offsetTop;
//如果事件位置在矩形区域中if(x>=rect.x&&x<=rect.x+rect.w&&y>=rect.y&&y<=rect.y+rect.h){

        //相应的操作

    }

}

2.如果是监听画布中某一部分或者某个文字/按钮事件

查看文章