zoukankan      html  css  js  c++  java
  • 前端使用canvas绘制立体三角形

    前端绘制立体效果的三角形的demo
    在移动端使用时,需要自适应屏幕。canvas上无法设置rem,所以在canvas外加一个父级元素设置为rem,再将canvas的宽高设置为100% 100%。
    如果想出现立体效果,应该将一个三角形分为三个三角形来进行绘制。
    突出立体的效果,应该设置过渡色。
     
     
    toTriangle(a,b,c){
    //a为左边三角的长度,b为顶点距离中心的长度,c为右边顶点距离中心的长度
    var bg = document.getElementById('circle_triangle');
    var ctx = bg.getContext('2d');
     
    //自适应cavas画布的宽高,动态设置。
    let canvas_outer = document.getElementById('outer');
    console.log(canvas_outer.offsetHeight);
    bg.height = canvas_outer.offsetHeight;
    bg.width = canvas_outer.offsetWidth;
     
    let bod = bg.getBoundingClientRect()
    let wid = bod.width;
    //三角形三个顶点从顶点:a_dot,左边点:b_dot,右边点:c_dot。和参数a,b,c有区别
    let a_dot = [wid/2,(wid/2)*(1-b)]
    let b_dot = [(wid/2)*(1-a*Math.cos((Math.PI)*45/180)),(wid/2)*(a*Math.sin((Math.PI)*45/180)+1)]
    let c_dot = [(wid/2)*(1+c*Math.cos((Math.PI)*45/180)),(wid/2)*(c*Math.sin((Math.PI)*45/180)+1)]
     
    //绘制三角形1(左边)
    ctx.beginPath();
    ctx.moveTo(wid/2,wid/2); //从A开始
    ctx.lineTo(b_dot[0],b_dot[1])//
    ctx.lineTo(a_dot[0],a_dot[1])
    var grd1 = ctx.createLinearGradient(b_dot[0],b_dot[1],a_dot[0],a_dot[1],);//使用渐变颜色填充,从 点b到a
    grd1.addColorStop(0,"#"); //起始颜色
    grd1.addColorStop(0.25,"#"); //起始颜色
    grd1.addColorStop(0.5,"#"); //起始颜色
    grd1.addColorStop(0.75,"#"); //终点颜色
    grd1.addColorStop(1,"#"); //终点颜色
    ctx.fillStyle=grd1; //以上面定义的渐变填充
    ctx.fill(); //闭合形状并且以填充方式绘制出来
    ctx.closePath()
     
    //绘制三角形2(右边)
    ctx.beginPath();
    ctx.moveTo(wid/2,wid/2); //从A开始
    ctx.lineTo(a_dot[0],a_dot[1])
    ctx.lineTo(c_dot[0],c_dot[1])
    var grd2 = ctx.createLinearGradient(a_dot[0],a_dot[1],c_dot[0],c_dot[1]);//使用渐变颜色填充,从(0,0)到(200,0) (左到右)
    grd2.addColorStop(0,"#"); //起始颜色
    grd2.addColorStop(0.25,"#"); //起始颜色
    grd2.addColorStop(0.5,"#"); //起始颜色
    grd2.addColorStop(0.75,"#"); //终点颜色
    grd2.addColorStop(1,"#"); //终点颜色
    ctx.fillStyle=grd2; //以上面定义的渐变填充
    ctx.fill(); //闭合形状并且以填充方式绘制出来
    ctx.closePath()
     
    //绘制三角形3(底部)
    ctx.beginPath();
    ctx.moveTo(wid/2,wid/2); //从A开始
    ctx.lineTo(b_dot[0],b_dot[1])//
    ctx.lineTo(c_dot[0],c_dot[1]);
    var grd3 = ctx.createLinearGradient(b_dot[0],b_dot[1],c_dot[0],c_dot[1]);//使用渐变颜色填充,从(0,0)到(200,0) (左到右)
    grd3.addColorStop(0,"#"); //起始颜色
    grd3.addColorStop(0.25,"#"); //起始颜色
    grd3.addColorStop(0.5,"#"); //起始颜色
    grd3.addColorStop(0.75,"#"); //终点颜色
    grd3.addColorStop(1,"#"); //终点颜色
    ctx.fillStyle=grd3; //以上面定义的渐变填充
    ctx.fill(); //闭合形状并且以填充方式绘制出来
    ctx.closePath()
    }
     
     
     

  • 相关阅读:
    布隆过滤器
    string.ToString("X")的含义,转换为16进制
    Stream.Write()和Stream.Read(), Stream.Flush的作用,待学习
    linux查看CPU,内存使用情况
    HttpContext.Current.Request.InputStream
    程序员常去的10个顶级开发社区
    JavaScript 对象初探
    PHP – 架構設計 Data Access Layer 篇
    如何用 JavaScript 动态呼叫函数
    PHP – EasyUI DataGrid 资料存的方式
  • 原文地址:https://www.cnblogs.com/qdcnbj/p/10319992.html
Copyright © 2011-2022 走看看