前端绘制立体效果的三角形的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. MySQL------代码1024,can't get hostname for your address解决方法

    1.hosts文件问题 进入C:\Windows\System32\drivers\etc\hosts 查看里面是否包含: # 127.0.0.1 localhost 没有则添加,再重启MySQL服务 ...

  2. ios开发之--CGRect/CGSize/CGPoint/CGVector/CGAffineTransform/UIEdgeInsets/UIOffset和NSString之间的转换

    仅做记录,一个函数和字符串之间的互相转换 方法如下: UIKIT_EXTERN NSString *NSStringFromCGPoint(CGPoint point); UIKIT_EXTERN N ...

  3. ios开发--图文混排(富文本)

    最近准备接一个编辑类的app,所以就查了下相关的功能,并自己试验了下: /** iOS 6之前:CoreText,纯C语言,极其蛋疼 iOS 6开始:NSAttributedString,简单易用 i ...

  4. Unreal新建C++类或C++项目失败

    出现以下错误: ... UnrealBuildTool Exception: System.UnauthorizedAccessException.... ... 是C盘无法访问权限的错误,请参考上一 ...

  5. Android之ListView中的分割线

    ListView中每个Item项之间都有分割线,设置android:footerDividersEnabled表示是否显示分割线,此属性默认为true. 1.不显示分割线只要在ListView控件中添 ...

  6. word文档排版技巧

    简介 市场部经常要出各种分析报告,一写就是洋洋洒洒几十页.文字功底深厚的小王写东西自然不在话下,然而每每困扰他的却是排版的问题,每次都要花大量的时间修改格式.制作目录和页眉页脚.最头疼的是上司看完报告 ...

  7. java基础---->数组的基础使用(一)

    数组是一种效率最高的存储和随机访问对象引用序列的方式,我们今天来对数组做简单的介绍.手写瑶笺被雨淋,模糊点画费探寻,纵然灭却书中字,难灭情人一片心. 数组的简单使用 一.数组的赋值 String[] ...

  8. ios笔试题(选择题)

    1-10 C语言 & 计算机基础 1.请看下面一段代码 static int a = 1; int main(){ int b = 2; char *c = NULL; c = (char * ...

  9. 第一个MapReduce的例子

    第一个MapReduce的例子 Hadoop Guide的第一个MapReduce的例子是处理气象数据的(数据来源ncdc),终于跑通了.总结一下步骤,安装hadoop不在本文中介绍 1 数据预处理 ...

  10. java环境变量、集成开发环境与使用两个类

    1.集成开发环境(IDE,Integrated Development Environment )是用于提供程序开发环境的应用程序,一般包括代码编辑器.编译器.调试器和图形用户界面等工具.集成了代码编 ...