前端使用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()

}

转载于:https://www.cnblogs.com/qdcnbj/p/10319992.html

前端使用canvas绘制立体三角形相关推荐

前端:用canvas绘制一个烟花动画
关注并将「趣谈前端」设为星标每日定时推送技术干货/优秀开源/技术思维前言在我们日常开发中贝塞尔曲线无处不在: svg 中的曲线(支持 2阶. 3阶) canvas 中绘制贝塞尔曲线几乎所有前端 ...
前端实现可绘制的canvas画布_前端图形学基础（五）——Canvas状态管理
点击右上角的关注,不定期前端干货分享!! 欢迎来到我的前端图形学系列文章: 前端图形学基础(一)--Canvas基础入门前端图形学基础(二)--Canvas基础前端图形学基础(三)--Canvas ...
小练手：用Canvas绘制谢尔宾斯基三角形
转载<小练手:用Canvas绘制谢尔宾斯基三角形> 补充作者第二种画法的完整程序: PS:修改function SierpinskiTriangle(p,len,depth = 9)中d ...
前端实现可绘制的canvas画布_JS前端基于canvas给图片添加水印
前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印.给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一.本文简单记录一下借助canvas在前端实现 ...
前端画圆弧html弧线的像素,使用canvas绘制圆弧动画
效果预览 canvas 绘制基本流程初始画布对于canvas的绘制,首先需要在html内指定一块画布,即, 可以看做是在PS中新建一个空白文档,之后所有的操作都将呈现在这个文档之上,与PS的区别是 ...
前端使用Canvas绘图(基础知识)--持续更新中
文章目录前言 canvas文档一.canvas代码提示(插件和注释) 1.1.使用插件方式(推荐这种方式) =>canvas-snippets 1.2.使用注释方式二.初始canvas 2 ...
小猿圈html5教程之canvas绘制线段方法
HTML5现在是时下较火的编程语言之一,但是对于怎么学习很多朋友都是不了解的,不知道从何处下手,针对以上内容小猿圈web前端讲师每天会分享一个web前端知识,希望对你的前端学习有一定的帮助,今天分享的 ...
HTML5实战——canvas 绘制钟表
用canvas绘制了一个钟表,废话不多说了,直接上代码吧.效果图如下: <!DOCTYPE html> <html> <head> <meta charset ...
canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

前端使用canvas绘制立体三角形

前端使用canvas绘制立体三角形相关推荐

最新文章

热门文章