canvas画矩形方法

// img图片地址,result绘画矩形的坐标,name要显示的文字,color颜色
draw_one_box(img, result, name, color, id) {let image = new Image();// 解决跨域 Canvas 污染问题image.setAttribute("crossOrigin", "anonymous");image.src = img;image.onload = () => {let canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;let context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);if (result) {result = JSON.parse(result);let x = result[0];let y = result[1];let w = result[2] - x;let h = result[3] - y;let text = name;context.beginPath();context.strokeStyle = "#f00";context.lineWidth = 5;context.strokeRect(x, y, w, h);let text_opt = {size: 16,color: "#f00",textBaseline: "top",};let offset_opt = {w: canvas.width,h: canvas.height,size: text_opt.size,textBaseline: text_opt.textBaseline,};let offset = common.textOffset(x + 5, y + 5, text, offset_opt);common.drawText(context, offset.x, offset.y, text, text_opt);}// 图片生成canvas.toBlob((blob) => {let imgurl = URL.createObjectURL(blob);if (this.isLeftOrRight === 0) {this.$set(this.leftRes[id], "url", imgurl);}if (this.isLeftOrRight === 1) {this.$set(this.rightRes[id], "url", imgurl);}}, "image/png");};},

canvas画矩形方法相关推荐

html边框样式不对,科技常识：HTML5 canvas画矩形时出现边框样式不一致的解决方法...
今天小编跟大家讲解下有关HTML5 canvas画矩形时出现边框样式不一致的解决方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5 canvas画矩形时出现边框样式不一致的解决 ...
用canvas画矩形
canvas是HTML5的新特性,我们可以用它来轻松地画一个矩形代码如下: <!DOCTYPE html> <html> <head> <meta char ...
（四）Canvas API方法和属性汇总
canvas主要属性和方法方法描述 save() 保存当前环境的状态 restore() 返回之前保存过的路径状态和属性 createEvent() getContext() 返回一个对象,指 ...
onDraw(canvas)和dispatchDraw（canvas）方法
绘制VIew本身的内容,通过调用View.onDraw(canvas)函数实现绘制自己的孩子通过dispatchDraw(canvas)实现 View组件的绘制会调用draw(Canvas canv ...
canvas drawImage方法不显示图片的解决方案
canvas drawImage方法不显示图片的解决方案参考文章: (1)canvas drawImage方法不显示图片的解决方案 (2)https://www.cnblogs.com/undefi ...
Canvas 绘制方法过一遍
Canvas 基础方法和参数介绍 save() restore() void enableZ() void disableZ() 绘制方法及参数介绍 1. drawARGB 画布颜色设置 void d ...
打印html5中Canvas的方法
function print_voucher(){ // 打印的主要方法var win=window.open();win.document.write("<br><img ...
HTML5 canvas drawImage() 方法记录
浏览器支持 Internet Explorer 9.Firefox.Opera.Chrome 以及 Safari 支持 drawImage() 方法. 注释:Internet Explorer 8 或 ...
html 判断页面支持canvas,HTML5 Canvas之测试浏览器是否支持Canvas的方法
在获取HTML页面上Canvas元素的引用后,我们需要测试一下该元素是否包含"上下文"(context).Canvas的上下文指的是由浏览器定义的用于绘画的平面.简单地说,如果上下 ...

canvas画矩形方法

canvas画矩形方法相关推荐

最新文章

热门文章