使用canvas画立体矩形

最新推荐文章于 2022-04-28 21:12:51 发布
最新推荐文章于 2022-04-28 21:12:51 发布
阅读量1.4k 收藏 3
点赞数
分类专栏： 小练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zyl_CN/article/details/83829594
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{
            display: block;
            border: 1px solid #000;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<canvas width="620" height="230"></canvas>

<script>
    var myCanvas = document.querySelector('canvas');
    var draw = myCanvas.getContext('2d');
    var flagNum=prompt('输入值');
    
    // 点亮
    drawjx(draw,26,80,157,187,36,90,146,176,'#caf1ff','#bce6f5','#aedaea',4,1000,flagNum,'#f9fdff','#f8fcfe','#f6fbfd','T1')
    drawjx(draw,108,162,137,187,120,173,125,176,'#a6ddff','#94cdf0','#81bbdf',6,2000,flagNum,'#f5fbff','#f3fafd','#f1f8fb','T2-1')
    drawjx(draw,192,246,112,187,202,256,103,176,'#78cbff','#6ab9ea','#54a3d3',8,3000,flagNum,'#f0f9ff','#eff7fd','#ecf5fa','T2-2')
    drawjx(draw,274,328,91,187,285,339,81,176,'#4bbdff','#39abec','#2395d6',10,4000,flagNum,'#ebf8ff','#e9f6fd','#e7f3fa','T3-1')
    drawjx(draw,357,411,72,187,368,422,59,176,'#32a1ff','#1f87df','#197bce',12,5000,flagNum,'#e8f5ff','#e6f2fb','#e6f1fa','T3-2')
    drawjx(draw,440,494,49,187,452,505,37,176,'#167eff','#1471e4','#1063c8',14,6000,flagNum,'#e5f1ff','#e5effc','#e5eef9','T4-1')
    drawjx(draw,523,577,33,187,534,588,23,176,'#0042ff','#0039dd','#0033c4',16,7000,flagNum,'#e3eaff','#e3e9fb','#e3e9f9','T4-2')
    
    /*
        canvas立体矩形函数
        ele canvas对象

        zmlx 正面左x
        zmrx 正面右x
        zmuy 正面上y
        zmdy 正面下y

        slx 上面左x
        srx 上面右x
        smy 上面右y

        cmy 侧面y

        zmcolor 正面点亮颜色
        upcolor 上面点亮颜色
        cmcolor 侧面点亮颜色

        pice    分的份数
        num     顶部刻度
        flagnum  传入的数值

        zmcoloroff 正面未亮颜色
        upcoloroff 上面未亮颜色
        cmcoloroff 侧面未亮颜色

        downtxt 底部标签

     */
    function drawjx(ele,zmlx,zmrx,zmuy,zmdy,slx,srx,smy,cmy,zmcolor,upcolor,cmcolor,pice,num,flagnum,zmcoloroff,upcoloroff,cmcoloroff,downtxt) {
        // 正面
        ele.beginPath()
        ele.lineWidth=1;
        ele.strokeStyle='transparent'
        ele.moveTo(zmlx,zmuy);  //正面左上
        ele.lineTo(zmrx,zmuy);  //正面右上
        ele.lineTo(zmrx,zmdy);  //正面右下
        ele.lineTo(zmlx,zmdy);  //正面左下
        ele.lineTo(zmlx,zmuy);  //正面左上
        if(flagnum>0&&num-flagnum<1000){
            ele.fillStyle=zmcolor
        }else{
            ele.fillStyle=zmcoloroff
        }
        ele.fill()
        ele.closePath();

        // 上面
        ele.beginPath()
        ele.strokeStyle='transparent'
        ele.moveTo(zmlx,zmuy);  //正面左上
        ele.lineTo(slx,smy);  //上面左点
        ele.lineTo(srx,smy);  //上面右点
        ele.lineTo(zmrx,zmuy);  //正面右上
        ele.lineTo(zmlx,zmuy);  //正面左上
        if(flagnum>0&&num-flagnum<1000){
            ele.fillStyle=upcolor
        }else{
            ele.fillStyle=upcoloroff
        }
        ele.fill()
        ele.closePath();

        // 侧面
        ele.beginPath()
        ele.strokeStyle='transparent'
        ele.moveTo(zmrx,zmuy);  //正面右上
        ele.lineTo(zmrx,zmdy);  //正面右下
        ele.lineTo(srx,cmy);  //侧面的点
        ele.lineTo(srx,smy);  //上面右点
        ele.lineTo(zmrx,zmuy);  //正面右上
        if(flagnum>0&&num-flagnum<1000){
            ele.fillStyle=cmcolor
        }else{
            ele.fillStyle=cmcoloroff
        }
        ele.fill()
        ele.closePath();

        // // 底部标签
        ele.beginPath();
        ele.font="12px Serif";
        if(flagnum<=num &&flagnum>(num-1000)){
            ele.fillStyle='red'
        }else{
            ele.fillStyle='#333'
        }
        ele.fillText(downtxt,(zmrx-zmlx)/3+zmlx,zmdy+15)
        ele.closePath();

        // 循环刻度
        ele.beginPath();
        ele.strokeStyle='#fff'
        var item=(zmuy-zmdy)/pice;
        for(var i=1;i<pice;i++){
            var sum=item*i
            if(flagnum>0&&num-flagnum<1000) {
                 ele.moveTo(zmlx, (zmdy + sum))
                ele.lineTo(zmlx + 8, (zmdy + sum))
                ele.lineTo(zmlx, (zmdy + sum))
                if (i == (pice - 1)) {
                    ele.fillStyle = '#000'
                    ele.font = "14px Serif";
                    ele.fillText(num, zmlx + 12, zmdy + sum - item / 2, 22)
                }
            }
        }
        ele.closePath();
        ele.stroke();
    }
</script>
</body>
</html>

Zyl_CN
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[html] 请使用canvas画一个渐变的长方形
歌谣的博客
03-23 520
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类 // umd适配多种引入方式 (function(root, factory) { if (typeof define === 'function' && define.amd) { // AMD define(['CanvasTool'], factory); } else if (typeof exports === 'object' &&am
uniapp中使用canvas画圆形及矩形进度条
potati的博客
02-19 1530
canvas绘制简单进度条
canvas实现立体图形
weixin_42595284的博客
09-06 3869
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; canvas{ border: 1px
html5 canvas立体图片展示特效
06-12
一个比较典型的html5 canvas案例，3D立体效果展现的非常好。 仅作欣赏使用，使用起来还是有点麻烦的
canvas 立体图
主要领域：前端开发
11-22 819
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body&gt
html5 canvas立体图片展示.zip
07-04
html5 canvas立体图片展示是一款比较典型的html5 canvas案例，3D立体效果展现的非常好；仅作欣赏使用，使用起来还是有点麻烦的。
canvas——绘制矩形
sleepwalker_1992的专栏
06-04 6101
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>矩形</title> </head> <body> <div id="container"> <canvas id="c...
HTML5 Canvas画印章
08-05
2. **获取Canvas上下文**：使用JavaScript的`document.getElementById`方法获取到`canvas`元素，并通过`getContext`方法获取2D渲染上下文，这是进行绘图操作的基础。 ```javascript var canvas = document....
html5 canvas立体图片展示特效代码
03-20
在这个“html5 canvas立体图片展示特效代码”案例中，我们看到的是一个利用Canvas API实现的3D立体图片展示效果。这种效果不仅能够吸引用户注意力，还能为网站增添互动性和创新性。 首先，我们需要理解Canvas的基本...
canvas动画demo
09-24
HTML5的`canvas`元素是一个矩形区域，可以用于在网页上绘制2D图形。通过JavaScript，我们可以控制`canvas`的绘图上下文（`context`），执行一系列绘图操作，如线条绘制、填充形状、图像处理等。在`canvas`中，我们...
画出来的没有立体感的长方体
10-30
画出来的没有立体感的长方体,怎么改变视角啊
基础的canvas学习（1）
qq_46113598的博客
04-28 1058
0-1初学绘制正方形 <canvas id="canvas" width="500" height="500"></canvas> <script> //获取canvas const canvas = document.getElementById('canvas') //画布对象 const app = canvas.getContext('2d') //填充颜色 ..
在canvas上实现3D效果
热门推荐
马永斌的博客
01-15 1万+
访问地址：http://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html DOCTYPE html> html> head> meta charset="UTF-8"> title>lesson1-by-shawn.xietitle> 引入Three.js-->
Canvas 绘制 3d 圆柱体
weixin_34384915的博客
07-12 3376
Canvas 绘制 3d 圆柱体 Preview | Source | Cylinder Source | Tutorial Wechart by Cax Cax 众所周知 Cax 是基于 2d Canvas 的跨平台(小游戏、小程序和Web)渲染引擎。但是能够绘制 3d 图表吗？ 答案是可以！有两种方式: 自己计算透视投影最终各个点的坐标，然后连接填充起来 自己按照眼睛成像经验直接绘制...
用Canvas绘制矩形（3）
small_ma
07-23 305
用Canvas绘制矩形（3） ctx.rect(x, y, width, height) x,y用于确定矩形左上角在Canvas画布坐标系中的位置；width、height表示宽高 ctx.rect(100, 100, 200, 100); ctx.stroke(); // ctx.fill(); 注意：rect需要结合stroke或fill使用，因为同前面线段一样，rect只是绘...
Demo_canvas通过矩形虚线框设计立体图形
我是我
09-14 379
1. 实现效果 2. 实现代码 <template> <div> <canvas id="canvas" :width="1000" :height="1000"></canvas> </div> </template> <script> export default { data() { return { offsetVal: 0, startX: 0, s
canvas绘制矩形
编程界明世隐的博客
01-14 5972
canvas提供了三个API，分别是： 1.绘制一个填充的矩形 fillRect(x, y, width, height) 2.绘制一个矩形的边框 strokeRect(x, y, width, height) 3.清除指定矩形区域，让清除部分完全透明 clearRect(x, y, width, height) 其中x、y是相对于画布左上角0,0 的距离，width是宽度，height设置矩形高度； 实例1 window.onload=function(){ ...
[Canvas绘图] 第27节 三维初探
微笑的彩虹的博客
12-17 3167
本节目标： (1)  绘制椭圆 (2)  绘制简单三维图形 实现步骤： 采用贝氏曲线绘制椭圆 //绘制椭圆 function BezierEllipse1(x, y, a, b, rotate) { //关键是bezierCurveTo中两个控制点的设置 //0.5和0.6是两个关键系数（在本函数中为试验而得） var ox = 0.5 * a, oy
vue使用canvas画矩形并可以脱动
最新发布
06-13
好的，我了解你的问题。首先，让我们来了解一下Canvas是什么以及如何在Vue中使用它。 Canvas是HTML5中的一个元素，它允许我们在其中进行绘图和渲染，并且可以使用JavaScript来操作它。在Vue中使用Canvas，我们可以使用Vue的渲染钩子，在组件加载后创建Canvas元素，并在其中绘制图形。 现在回到你的问题，你想要使用Canvas在Vue中绘制可移动的矩形。那么，我们需要做以下几步： 1. 创建Canvas元素 在Vue的组件中，我们可以使用`mounted`钩子函数来创建Canvas元素。代码如下： ```javascript mounted() { this.canvas = this.$refs.canvas this.ctx = this.canvas.getContext('2d') } ``` 这里我们通过`$refs`引用了一个名为`canvas`的元素，并使用`getContext`方法获取了Canvas的上下文对象，用于后续的绘制操作。 2. 绘制矩形 接下来，我们可以使用Canvas的绘制方法绘制矩形。代码如下： ```javascript drawRect(x, y, w, h) { this.ctx.beginPath() this.ctx.rect(x, y, w, h) this.ctx.fillStyle = '#FF0000' this.ctx.fill() this.ctx.closePath() } ``` 这里我们定义了一个`drawRect`方法，传入矩形的位置和大小参数，并使用Canvas的`rect`方法绘制矩形。我们还设置了矩形的填充颜色为红色。 3. 实现矩形的移动 最后，我们可以使用Vue的事件监听方法，如`mousemove`和`mousedown`来实现矩形的移动。代码如下： ```javascript handleMouseDown(e) { this.isDragging = true this.dragStartX = e.clientX - this.canvas.offsetLeft this.dragStartY = e.clientY - this.canvas.offsetTop }, handleMouseMove(e) { if (this.isDragging) { const x = e.clientX - this.canvas.offsetLeft const y = e.clientY - this.canvas.offsetTop const dx = x - this.dragStartX const dy = y - this.dragStartY this.drawRect(this.rectX + dx, this.rectY + dy, this.rectW, this.rectH) this.dragStartX = x this.dragStartY = y } }, handleMouseUp(e) { this.isDragging = false } ``` 这里我们定义了三个事件监听方法，分别为`mousedown`、`mousemove`和`mouseup`。在`mousedown`事件中，我们设置了一个`isDragging`标志，表示矩形是否正在被拖动。我们还记录了鼠标点击时的位置，以便后续计算矩形的位置偏移量。 在`mousemove`事件中，我们检查`isDragging`标志，如果为`true`，则计算鼠标位置的偏移量，并调用`drawRect`方法重绘矩形。最后，我们更新`dragStartX`和`dragStartY`的值，以便下一次计算偏移量时使用。 在`mouseup`事件中，我们将`isDragging`标志设置为`false`，表示拖动事件已经结束。 综上，我们可以使用以上代码在Vue中实现可移动的矩形。希望这能帮助到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值