前端绘制立体效果的三角形的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()
}
 
 
 

前端使用canvas绘制立体三角形的更多相关文章

  1. canvas一周一练 -- canvas绘制立体文字(2)

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  2. 小练手:用HTML5 Canvas绘制谢尔宾斯基三角形

    文章首发于我的知乎专栏,原地址:https://zhuanlan.zhihu.com/p/26606208 以前看到过一个问题:谢尔宾斯基三角形能用编程写出来么?该怎么写? - 知乎,在回答里,各方大 ...

  3. 学习笔记:HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  4. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  5. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  6. 使用Canvas绘制图形的基本教程

    原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  7. HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

    原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  8. canvas 绘制双线技巧

    楔子 最近一个项目,需要绘制双线的效果,双线效果表示的是轨道(类似铁轨之类的),如下图所示: 负责这块功能开发的小伙,姑且称之为L吧,最开始是通过数学计算的方式来实现这种双线,也就是在原来的路径的基础 ...

  9. 用canvas绘制验证码

    在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写: 但是在前端,用canva或者SV ...

随机推荐

  1. Xmanager连接图形界面

    1.编辑gnome配置文件vim /etc/gdm/custom.conf # GDM configuration storage [daemon]RemoteGreeter= /usr/libexe ...

  2. Linux命令之乐--cat

    cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. 命令参数: -A, --show-all  ...

  3. JSP指令与动作元素

    include指令 语法:<%@ include file="URL" %> 其中,URL表示一个要包含的页面. include动作(是一个动作标签) 语法:<j ...

  4. 如何在 Linux 上录制你的终端操作

    导读 录制一个终端操作可能是一个帮助他人学习 Linux .展示一系列正确命令行操作的和分享知识的通俗易懂方法.不管是出于什么目的,从终端复制粘贴文本需要重复很多次,而录制视频的过程也是相当麻烦,有时 ...

  5. 83、android的消息处理机制(图+源码分析)——Looper,Handler,Message

    转载:http://www.cnblogs.com/codingmyworld/archive/2011/09/12/2174255.html https://my.oschina.net/u/139 ...

  6. Go基础---->go的第一个程序

    今天我们学习搭建一个学习go语言的开发环境. Go语言 一.下载go 下载地址:https://golang.org/dl/ 校验下载,在命令行输入go version 二.编写第一个hello wo ...

  7. 六 Android Studio打包Eegret App (解决开机黑屏问题)

    因为android studio中的SplashActivity并没有什么卵用,只是开机1s显示开机画面,1s后面还是黑屏. 在主文件中加入以下代码,就是开始游戏时显示一个居中填满屏幕的图片,游戏加载 ...

  8. 在Windows上手动安装php开发环境

    安装MySQL 使用官方提供提供的安装包一键安装即可. 打开 mysql,选择Windows,MSI Installer点击下载.附:最新版mysql5.7.18下载地址 点击installer安装, ...

  9. Vue.js_getter and setter

    computed 计算属性: 1.get 读取 <div id="test2"> <input type="text" v-model=&qu ...

  10. 防止Form中嵌入WebBrowser出错导致程序崩溃

     siow(1253366)  10:11:13两种方法你用的自带的webbrowser还是embeded那个毛小毛(3335076)  10:12:15或者有什么办法拦截到是webbrowser,如 ...