canva绘制圆角矩形

在做组态的时候，需要支持矩形圆角格式，但是因为canvas本身不带有圆角矩形，需要自行算出坐标进行绘制

方案一、统一圆角

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>canvas制作圆角矩形（包括填充矩形的功能）</title>

</head>

<body>

    <canvas id="myCanvas" style="border:1px solid #d3d3d3;">

        您的浏览器不支持 HTML5 canvas 标签。</canvas>

    <script>

    window.onload = function() {

        var myCanvas = document.getElementById("myCanvas"); //获取canvas对象

        if (myCanvas.getContext("2d")) { //判断浏览器是否支持canvas标签

            //设置canvas的宽度和高度

            myCanvas.width = 400;

            myCanvas.height = 200;

            var context = myCanvas.getContext("2d"); //获取画布context的上下文环境

            //绘制一个圆角矩形

            strokeRoundRect(context, 10, 10, 100, 50, 10);  

            //绘制并填充一个圆角矩形

            fillRoundRect(context, 200, 10, 100, 50, 10, 'rgba(0,0,0,0.7)');

        } else {

            alert("您的浏览器不支持canvas，请换个浏览器试试");

        }

    };

    /**该方法用来绘制一个有填充色的圆角矩形

     *@param cxt:canvas的上下文环境

     *@param x:左上角x轴坐标

     *@param y:左上角y轴坐标

     *@param width:矩形的宽度

     *@param height:矩形的高度

     *@param radius:圆的半径

     *@param fillColor:填充颜色

     **/

    function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {

        //圆的直径必然要小于矩形的宽高

        if (2 * radius > width || 2 * radius > height) { return false; }

        cxt.save();

        cxt.translate(x, y);

        //绘制圆角矩形的各个边

        drawRoundRectPath(cxt, width, height, radius);

        cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值

        cxt.fill();

        cxt.restore();

    }

    /**该方法用来绘制圆角矩形

     *@param cxt:canvas的上下文环境

     *@param x:左上角x轴坐标

     *@param y:左上角y轴坐标

     *@param width:矩形的宽度

     *@param height:矩形的高度

     *@param radius:圆的半径

     *@param lineWidth:线条粗细

     *@param strokeColor:线条颜色

     **/

    function strokeRoundRect(cxt, x, y, width, height, radius, /*optional*/ lineWidth, /*optional*/ strokeColor) {

        //圆的直径必然要小于矩形的宽高

        if (2 * radius > width || 2 * radius > height) { return false; }

        cxt.save();

        cxt.translate(x, y);

        //绘制圆角矩形的各个边

        drawRoundRectPath(cxt, width, height, radius);

        cxt.lineWidth = lineWidth || 2; //若是给定了值就用给定的值否则给予默认值2

        cxt.strokeStyle = strokeColor || "#000";

        cxt.stroke();

        cxt.restore();

    }

    function drawRoundRectPath(cxt, width, height, radius) {

        cxt.beginPath(0);

        //从右下角顺时针绘制，弧度从0到1/2PI

        cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

        //矩形下边线

        cxt.lineTo(radius, height);

        //左下角圆弧，弧度从1/2PI到PI

        cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

        //矩形左边线

        cxt.lineTo(0, radius);

        //左上角圆弧，弧度从PI到3/2PI

        cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);

        //上边线

        cxt.lineTo(width - radius, 0);

        //右上角圆弧

        cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);

        //右边线

        cxt.lineTo(width, height - radius);

        cxt.closePath();

    }

    </script>

</body>

</html>

效果图

方案二、支持多种圆角格式【右下、左下、左上、右上】

申明一个变量，以数组的形式，然后将 drawRoundRectPath函数重新改写一下即可

    drawRoundRectPath(cxt, width, height) {

      var radius = this.radius;//vue data里面的数据

      var  r0 = radius[0],r1 = radius[1],r2 = radius[2],r3 = radius[3];

      cxt.beginPath(0);

      //从右下角顺时针绘制，弧度从0到1/2PI

      cxt.arc(width - r0, height - r0, r0, 0, Math.PI / 2);

      //矩形下边线

      cxt.lineTo(r1, height);

      //左下角圆弧，弧度从1/2PI到PI

      cxt.arc(r1, height - r1, r1, Math.PI / 2, Math.PI);

      //矩形左边线

      cxt.lineTo(0, r2);

      //左上角圆弧，弧度从PI到3/2PI

      cxt.arc(r2, r2, r2, Math.PI, Math.PI * 3 / 2);

      //上边线

      cxt.lineTo(width - r3, 0);

      //右上角圆弧

      cxt.arc(width - r3, r3, r3, Math.PI * 3 / 2, Math.PI * 2);

      //右边线

      cxt.lineTo(width, height - r3);

      cxt.closePath();

    }

实例

vue进行绘制矩形

<template>

  <canvas

    :id="options.id"

    ref="canvas"

    class="elem-container"

    :width="canvasWidth"

    :height="canvasHeight"

    :style="assignStyle"

  />

</template>

<script>

import mixins from './canvasMixins.js'

export default {

  name: 'RectElem',

  mixins: [mixins],

  data() {

    return {

      myOptions: {

        penStyle: 0

      },

      assignStyle: {} // 合并样式

    }

  },

  computed: {

    'canvasWidth': function() {

      return (parseFloat(this.myOptions.width) + parseFloat(this.myOptions.borderWidth))

    },

    'canvasHeight': function() {

      return (parseFloat(this.myOptions.height) + parseFloat(this.myOptions.borderWidth))

    },

    'radius' : function(){

      debugger;

      if(this.myOptions.radius == "none"){ return [0,0,0,0]}

      return !!this.myOptions.radius ? JSON.parse(this.myOptions.radius) : [0,0,0,0]

    }

  },

  mounted() {

    this.initialStyleOfRec()

  },

  methods: {

    initialStyleOfRec() {

      const options = this.myOptions // 父组件传入的参数

      const bWidth = options.borderWidth

      let baseStyle = options.style // 未转为对象前的基础样式（字符串）

      const width = options.width ? `width:${options.borderWidth ? (options.width * 1 + options.borderWidth) : options.width}px;` : ''

      const height = options.height ? `height:${options.borderWidth ? (options.height * 1 + options.borderWidth) : options.height}px;` : ''

      const len = baseStyle.length

      baseStyle = baseStyle.charAt(len - 1) === ';' ? (baseStyle + width + height) : (baseStyle + ';' + width + height)

      this.baseStyle = this.style2Object(baseStyle)

      if (bWidth && bWidth !== '') {

        this.baseStyle.top = `${-0.5 * (this.options.borderWidth || 0)}px`

        this.baseStyle.left = `${-0.5 * (this.options.borderWidth || 0)}px`

      }

      this.assignStyle = this.baseStyle

    },

    // // 把字符串样式转化为{}

    // styleToObject(style) {

    //   let styleObject = {}

    //   if (style && style !== '' && style !== 'null') {

    //     const len = style.length

    //     styleObject = style.charAt(len - 1) === ';' ? '{' + style + '}' : '{' + style + ';}' // 统一样式后面以";"结束

    //     // 将字符串转化为json标准字符串

    //     styleObject = styleObject.replace(/{/g, '{\"')

    //     styleObject = styleObject.replace(/:/g, '\":\"')

    //     styleObject = styleObject.replace(/;/g, '\",\"')

    //     styleObject = styleObject.replace(/,"}/g, '}')

    //     // 将json标准字符串转化为{}对象

    //     styleObject = JSON.parse(styleObject)

    //   }

    //   return styleObject

    // },

    render(options) {

      const ctx = this.getCleanCtx()// 获取canvas画布

      const penStyle = options.penStyle// 线型

      // 判断

      const halfBW = 0.5 * (options.borderWidth || 0) // 线宽的一半

      const fillColor = options.fillColor

      if (penStyle === 0) {

        ctx.lineWidth === 0

      } else if (penStyle !== 1) {

        ctx.setLineDash(this.getLineDashArr(penStyle))

      }

      let param = {

          x:0 + halfBW,

          y:0 + halfBW,

          w:options.width,

          h:options.height,

          radius:options.radius || [0,0,0,0]

        }

      if (fillColor !== 'none') {

        // 绘制填充矩形

        ctx.fillStyle = fillColor

       // ctx.fillRect(0 + halfBW, 0 + halfBW, options.width, options.height);

        //绘制填充圆角矩形

        this.fillRoundRect(ctx,param);

        //ctx.fill()

      }

      ctx.lineWidth = options.borderWidth

      ctx.strokeStyle = options.borderColor

      //ctx.strokeRect(0 + halfBW, 0 + halfBW, options.width, options.height)

      //绘制描边圆角矩形

      this.strokeRoundRect(ctx,param);

    },

    /**该方法用来绘制一个有填充色的圆角矩形

     *@param cxt:canvas的上下文环境

     *@param param.x:左上角x轴坐标

     *@param param.y:左上角y轴坐标

     *@param param.w:矩形的宽度

     *@param param.h:矩形的高度

     *@param param.radius:圆的半径

     **/

    fillRoundRect(cxt, param) {

        let x = param.x,

        ctx = ctx,

        y = param.y,

        width = param.w,

        height = param.h,

        radius = param.radius;

        //圆的直径必然要小于矩形的宽高

        if (2 * radius > width || 2 * radius > height) { return false; }

        cxt.save();

        cxt.translate(x, y);

        //绘制圆角矩形的各个边

        this.drawRoundRectPath(cxt, width, height, radius);

        //cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值

        cxt.fill();

        cxt.restore();

    },

    drawRoundRectPath(cxt, width, height) {

      var radius = this.radius;

      var  r0 = radius[0],r1 = radius[1],r2 = radius[2],r3 = radius[3];

      cxt.beginPath(0);

      //从右下角顺时针绘制，弧度从0到1/2PI

      cxt.arc(width - r0, height - r0, r0, 0, Math.PI / 2);

      //矩形下边线

      cxt.lineTo(r1, height);

      //左下角圆弧，弧度从1/2PI到PI

      cxt.arc(r1, height - r1, r1, Math.PI / 2, Math.PI);

      //矩形左边线

      cxt.lineTo(0, r2);

      //左上角圆弧，弧度从PI到3/2PI

      cxt.arc(r2, r2, r2, Math.PI, Math.PI * 3 / 2);

      //上边线

      cxt.lineTo(width - r3, 0);

      //右上角圆弧

      cxt.arc(width - r3, r3, r3, Math.PI * 3 / 2, Math.PI * 2);

      //右边线

      cxt.lineTo(width, height - r3);

      cxt.closePath();

    },

    /**该方法用来绘制描边圆角矩形

     *@param cxt:canvas的上下文环境

     *@param x:左上角x轴坐标

     *@param y:左上角y轴坐标

     *@param width:矩形的宽度

     *@param height:矩形的高度

     *@param radius:圆的半径

     *@param lineWidth:线条粗细

     *@param strokeColor:线条颜色

     **/

    strokeRoundRect(cxt,param){

      let x = param.x,

      y = param.y,

      width = param.w,

      height = param.h,

      radius = param.radius;

      //圆的直径必然要小于矩形的宽高

      if (2 * radius > width || 2 * radius > height) { return false; }

      cxt.save();

      cxt.translate(x, y);

      //绘制圆角矩形的各个边

      this.drawRoundRectPath(cxt, width, height, radius);

     // cxt.lineWidth = lineWidth || 2; //若是给定了值就用给定的值否则给予默认值2

      //cxt.strokeStyle = strokeColor || "#000";

      cxt.stroke();

      cxt.restore();

    }

  }

}

</script>

canva绘制圆角矩形的更多相关文章

在Microsoft Expression Blend 2 中绘制圆角矩形按钮
原文:在Microsoft Expression Blend 2 中绘制圆角矩形按钮 /* 声明:转载请保留此信息:http://www.BrawDraw.com, http://www.ZPXP.c ...
Android中绘制圆角矩形图片及任意形状图片
圆角矩形图片在苹果的产品中很流行,相比于普通的矩形,很多人都喜欢圆角矩形的图片,因为它避开了直角的生硬,带来更好的用户体验,下面是几个设计的例子: 下面在Android中实现将普通的矩形图片绘制成圆角 ...
Delphi中绘制圆角矩形的窗体
制作圆角矩形的窗体: 01.procedure TPortForm.FormCreate(Sender: Tobject); 02.var hr :thandle; 03.begin 04.hr:=c ...
C# 绘制圆角矩形
Graphics g = e.Graphics; // 圆角半径 ; // 要实现圆角化的矩形 Rectangle rect = , , panel4.Width - cRadius, panel ...
Cocos2d-x绘制圆角矩形
/* * @brief 画圆角矩形 * @param origin 矩形开始点 * @param destination 矩形结束点 * @param radius 圆角半径 * @param seg ...
canvas 绘制圆角矩形
<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</ ...
使用Draw rect 绘制圆角矩形
- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); UIGraphicsPush ...
详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧
1.矩形绘制矩形应该是最简单的了,直接设置div的宽和高,填充颜色,效果就出来了. 2.圆角矩形绘制圆角矩形也很简单,在1的基础上,在使用css3的border-radius,即可. 3.圆根据 ...
Android开发之自定义圆角矩形图片ImageView的实现
android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆角矩形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap ...

随机推荐

shell 脚本基础与条件判断
#!shell脚本格式决定专业性 #!/bin/bash #filename:脚本名 #author:作者 #date:时间 #脚本作用脚本的执行方式 #脚本名为wk.sh 绝对路径 /root/ ...
SEO中常用的301永久重定向代码大全
301是永久重定向的意思,表示请求的网页已永久移动到新位置,服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置.其实301重定向在SEO中被广泛应用,也是被广泛认为比 ...
IPv6 ping命令
IPv6 ping命令一.Linux操作系统给一台 Linux 主机分配了一个 IPv6 的 IP地址,如何使用 ping命令确定该 IP地址能否 ping 通呢? 1.查看主机的 IPv6 ...
MYSQL理论学习
最近在复习数据库相关的知识,主要是以“SQL必知必会”这本书为参考,结合网上相关博客,记录学习的要点.本篇博客会持续更新,便于以后复习. 参考博客:http://blog4jimmy.com/2017 ...
JavaScript高程第三版笔记-DOM扩展
在那个刀耕火种的年代,用过jQuery的都体会到了jQuery带来的便捷,尤其是元素选择器. jQuery(www.jquery.com)的核心就是通过 CSS 选择符查询 DOM 文档取得元素的引用 ...
python装饰器的构建
#!/usr/bin/python3# -*-coding:utf-8 -*-# @Time : 2019/9/27 17:04# @Author : v_ctaozhang import funct ...
JavaScript（6）—— 返回特征数字
案例要求根据业务情况,要把核心的东西变成一个模块便于复用,慢慢沉淀后,能够更快更高效地编程. 业务核心算法: /* 数字检测 @return 返回2,能被3和7整除返回1,能够被3整除返回0,不 ...
Python multiprocess模块(中)
主要内容: 一. 锁二. 信号量三. 事件通过event来完成红绿灯模型四. 队列(重点) 队列实现进程间的通信五. 生产者消费者模型 1. 初始版本(程序会阻塞住) 2. 升级版本一(通过 ...
【Linux】部署NTP时间同步服务器
1. 查看机器的Linux版本查看集群内所有服务器的linux版本,确保相同,不要跨大版本. [root@bigdata111 ~]# cat /etc/redhat-release CentOS ...
这些喜闻乐见的Java面试知识点，你都掌握了吗？
最近分享了一些有关学习方法和经验的文章,得到了很多读者的反馈,恰巧大家在昨天推文中的投票里一直选择了"Java基础的复习方法"这一项,那么今天我们就谈谈这方面的内容吧. 其实对于J ...

canva绘制圆角矩形

canva绘制圆角矩形的更多相关文章

随机推荐

热门专题