zoukankan      html  css  js  c++  java
  • canvas绘图


    1、//获取canvas容器
    var can = document.getElementById('canvas');
    //创建一个画布
    var ctx = can.getContext('2d');
    2、绘制圆形
    var draw = function(x, y, r, start, end, color, type) {
    var unit = Math.PI / 180;
    ctx.beginPath();
    ctx.arc(x, y, r, start * unit, end * unit);
    ctx[type + 'Style'] = color;
    ctx.closePath();
    ctx[type]();
    }
    //    参数解释:x,y-圆心;start-起始角度;end-结束角度;color-绘制颜色;type-绘制类型('fill'和'stroke')。

    3、绘制三角形

    var draw = function(x1, y1, x2, y2, x3, y3, color, type) {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineTo(x3, y3);
    ctx[type + 'Style'] = color;
    ctx.closePath();
    ctx[type]();
    }
    4、绘制圆角矩形
    var draw = function(x, y, width, height, radius, color, type){
    ctx.beginPath();
    ctx.moveTo(x, y+radius);
    ctx.lineTo(x, y+height-radius);
    ctx.quadraticCurveTo(x, y+height, x+radius, y+height);
    ctx.lineTo(x+width-radius, y+height);
    ctx.quadraticCurveTo(x+width, y+height, x+width, y+height-radius);
    ctx.lineTo(x+width, y+radius);
    ctx.quadraticCurveTo(x+width, y, x+width-radius, y);
    ctx.lineTo(x+radius, y);
    ctx.quadraticCurveTo(x, y, x, y+radius);
    ctx[type + 'Style'] = color || params.color;
    ctx.closePath();
    ctx[type]();
    }
    5、绘制多边形(封装的一个方法)
    var drawPolygon = function(ctx, conf){
    var x = conf && conf.x || 0; //中心点x坐标
    var y = conf && conf.y || 0; //中心点y坐标
    var num = conf && conf.num || 3; //图形边的个数
    var r = conf && conf.r || 100; //图形的半径
    var width = conf && conf.width || 5;
    var strokeStyle = conf && conf.strokeStyle;
    var fillStyle = conf && conf.fillStyle;
    //开始路径
    ctx.beginPath();
    var startX = x + r * Math.cos(2*Math.PI*0/num);
    var startY = y + r * Math.sin(2*Math.PI*0/num);
    ctx.moveTo(startX, startY);
    for(var i = 1; i <= num; i++) {
    var newX = x + r * Math.cos(2*Math.PI*i/num);
    var newY = y + r * Math.sin(2*Math.PI*i/num);
    ctx.lineTo(newX, newY);
    }
    ctx.closePath();
    //路径闭合
    if(strokeStyle) {
    ctx.strokeStyle = strokeStyle;
    ctx.lineWidth = width;
    ctx.lineJoin = 'round';
    ctx.stroke();
    }
    if(fillStyle) {
    ctx.fillStyle = fillStyle;
    ctx.fill();
    }
    }

    参数说明:

    ctx: canvas画布

    conf: 配置项,提供以下一些配置

    • x: 中心点横坐标
    • y: 中心点纵坐标
    • num: 多边形的边数
    • r:多边形的半径长度
    • width:多边形线的宽度
    • strokeStyle:边线的颜色
    • fillStyle:填充的颜色

    绘制一个六边形,边框为蓝色,填充颜色为灰色。

    drawPolygon(ctx, {
    num: 6,
    r: 100,
    strokeStyle: 'blue',
    fillStyle: '#9da'
    })
    
    
  • 相关阅读:
    卷积神经网络
    舍弃—Dropout
    池化—Pooling
    Python基础知识点——简单 函数
    同事将excel数据转化为pdf,提前下班了,而我还在苦逼地做表
    怎么才能隐藏的IP?打造超强IP池项目,让你自己都忘记原本的IP
    Python爬取抖音视频(没有水印的哟)
    Python可视化:matplotlib 制作雷达图进行对比分析
    用于GIS(地理信息系统)和三维可视化制图的Python库
    关于如何在文件中调用命令窗口执行代码(以python为例)
  • 原文地址:https://www.cnblogs.com/dragonh/p/6231836.html
Copyright © 2011-2022 走看看