canvas实际项目操作，包含：线条，圆形，扇形，图片绘制，图片圆角遮罩，矩形，弧形文字...

最新推荐文章于 2022-06-21 17:01:27 发布
最新推荐文章于 2022-06-21 17:01:27 发布
阅读量308 收藏 1
点赞数
原文链接：https://segmentfault.com/a/1190000006258726
版权

学完我写的上一章小白上学canvas基础，我们就来这里现学现用了。这里先看我们的设计图和最终实现效果；
左面是设计稿，右面是完成后的效果图：

clipboard.png
没办法和原图一模一样。文字下方数字正的，我的是倒着的；
此图难点：扇形，圆形头像，弧形文字
话不多说直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    html,body{background: #273341;}
    #mycanvas{}  
    .pie{width: 320px;height: 320px;margin: 0 auto;}
    img{width: 100%;display: none}
    .economy{text-align: center;transform: rotate(45deg);color: #fff;font-family: "微软雅黑";font-size: 14px;}
</style>
<body>
   <div class="pie">       
    <canvas id="canvas" width="960" height="960" style="width:320px;height:320px;"></canvas>
   </div>
<!-- canvas的画布宽高（分辨率）是width和height，而style中的宽高是canvas在页面中显示的宽高，画布分辨率越高，绘制出来的图任意缩放也不会出现很大的锯齿 -->
</body>
<script>
var canvas = document.getElementById('canvas');   
    var r2=380,r1=480;
    var ctx = canvas.getContext('2d');
if (canvas.getContext){
    var circle = {x: 480,
                  y: 480,
                  radius: 442}
    var smccircle = {x: 480,
                  y: 480,
                  radius: 342}
    //背景色
    ctx.fillStyle = '#273341';
    ctx.fillRect(0,0,960,960);
    ctx.fill();
   //外彩色扇形背景圆1
    ites(0,360,480,'#323d4b');
    //彩色外扇叶
    ites(0,30,r1,'#4c17e2');//>0
    ites(45,55,r1,'#1777e2');//>45
    ites(90,110,r1,'#17cde2');//>90
    ites(135,146,r1,'#3fc371');//>135
    ites(180,198,r1,'#ffbc3a');//>180
    ites(225,231,r1,'#e27217');//>225
    ites(270,290,r1,'#e217a1');//>270
    ites(315,335,r1,'#b017e2');//>315&<360
    //内覆盖扇形背景圆1
    ites(0,360,400,'#273341');

    //彩色内扇叶
    ites(0,45,r2,'#4c17e2');
    ites(45,90,r2,'#1777e2');
    ites(90,135,r2,'#17cde2');
    ites(135,180,r2,'#3fc371');
    ites(180,225,r2,'#ffbc3a');
    ites(225,270,r2,'#e27217');
    ites(270,315,r2,'#e217a1');
    ites(315,360,r2,'#b017e2');

    //内覆盖扇形背景圆2
    ites(0,360,300,'#273341');
    //交叉背景线
    line(0,480,960,480);
    line(480,0,480,960);
    line(0,0,960,960);
    line(960,0,0,960);
    
    ctx.arc(480,480,r2,0,rads(45),false);
    ctx.save();
    //头像边框
    drawCircularText(smccircle,'水分', rads(18), rads(28),'center');
    drawCircularText(smccircle,'蛋白质', rads(58), rads(78),'center');
    drawCircularText(smccircle,'内脏脂肪', rads(98), rads(127),'center');
    drawCircularText(smccircle,'骨骼', rads(153), rads(163),'center');
    drawCircularText(smccircle,'基础代谢', rads(188), rads(216),'center');
    drawCircularText(smccircle,'BMI', rads(241), rads(253),'center');
    drawCircularText(smccircle,'脂肪', rads(287), rads(298),'center');
    drawCircularText(smccircle,'肌肉', rads(333), rads(343),'center');

    ctx.restore();
    var v = 'left';
    drawCircularText(circle,'60.5%', rads(24), rads(38),v);
    drawCircularText(circle,'17.8%', rads(69), rads(83),v);
    drawCircularText(circle,'    6', rads(114), rads(130),v);
    drawCircularText(circle,'  4.3', rads(159), rads(175),v);
    drawCircularText(circle,' 1570', rads(204), rads(220),v);
    drawCircularText(circle,' 21.6', rads(249), rads(265),v);
    drawCircularText(circle,'17.1%', rads(294), rads(308),v);
    drawCircularText(circle,'55.5%', rads(339), rads(353),v);
    // Create a circular clipping path
    ctx.translate(480,480);
    ctx.beginPath();
    ctx.arc(0,0,160,0,Math.PI*2,true);
    ctx.closePath();
    ctx.strokeStyle="#ffbc3a";
    ctx.lineWidth =16;
    ctx.stroke();
    ctx.clip();
    var img = new Image();
    img.src='css/img/head.png';
    img.onload = function(){       
        ctx.drawImage(img,-160,-160,320,320);
    }
    
  }
    //转换弧度
    function rads(x){
        return Math.PI*x/180;
    }
    //圆
    function ites(a,b,r,color){
        ctx.beginPath();
        ctx.moveTo(480,480);
        ctx.arc(480,480,r,rads(a),rads(b),false);
        ctx.closePath();
        ctx.fillStyle = color;
        ctx.fill();
    }
    //线
    function line(a,b,c,d){
        ctx.beginPath();
        ctx.moveTo(a,b);
        ctx.lineTo(c,d);
        ctx.strokeStyle="#273341";
        ctx.closePath();
        ctx.lineWidth =10;
        ctx.stroke();
    }
     function siner(a,b,deg,font){
        ctx.save();
        ctx.fillStyle = '#fff'
        ctx.textAlign = "center";
        ctx.font = '48px 微软雅黑';
        ctx.translate(a, b);
        ctx.rotate(rads(deg))
        ctx.fillText(font, 0, 0);
        ctx.restore();
     }
    
    function drawCircularText(s,string, startAngle, endAngle ,lv){
        var radius = s.radius,
            angleDecrement = (startAngle - endAngle)/(string.length-1),
            angle = parseFloat(startAngle),
            index = 0,
            character;
        
        ctx.save();
        
        ctx.fillStyle = 'white';
        ctx.font = '40px 微软雅黑';
        ctx.textAlign = lv;
        ctx.textBaseline = 'middle';
        
        while (index < string.length) {
            character = string.charAt(index);
            
            ctx.save();
            ctx.beginPath();
            ctx.translate(s.x + Math.cos(angle) * radius,
                          s.y + Math.sin(angle) * radius);
            ctx.rotate(Math.PI/2 + angle);
            
            ctx.fillText(character, 0, 0);
//            ctx.strokeText(character, 0, 0);
            
            angle -= angleDecrement;
            index++;
            ctx.restore();
        }
        ctx.restore();
    }
   
/*//H绘制圆形头像
//  var ctx = document.getElementById('canvas').getContext('2d');
//  ctx.fillRect(0,0,240,240);
  ctx.translate(120,120);

  // Create a circular clipping path
  ctx.beginPath();
  ctx.arc(0,0,40,0,Math.PI*2,true);
  ctx.clip();

  // draw background
  var lingrad = ctx.createLinearGradient(0,-240,0,240);
  lingrad.addColorStop(0, '#232256');
  lingrad.addColorStop(1, '#143778');
  
  ctx.fillStyle = lingrad;
  ctx.fillRect(-75,-75,150,150);
  var img = new Image();
    img.src='css/img/head.jpg';
    img.onload = function(){       
        ctx.drawImage(img,-40,-40,80,80);
    }*/
  
</script>
</html>

上面的代码直接复制进你的html文件里打开就能看到效果。
注意事项：
开始时按240像素大小的画布写，最后发现放在分辨率高的手机上全是锯齿，所以最后采用960的宽高来写。
绘制完图片（头像）会覆盖整个画布，所以图片得最后绘制。
弧形文字需要一点一旦调整弧度。
留言：如有疑问关注我给我留言，我们一起成为大牛！

weixin_34252090
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
12-29
1 前言 1.1 业务场景 图片储存在后台中，根据图片的地址，在vue页面中，查看图片，并根据坐标标注指定区域。 由于浏览器的机制，使用 [removed].href 下载图片时，并不会保存到本地，会在浏览器打开。 2 实现原理 2.1 绘制画布 <el title=查看图片 visible.sync=dialogJPG > <canvas id=mycanvas width=940 height=570></canvas> </el> 这里为了交互体验，使用了 element-ui 的
用canvas绘制带有文字注释的扇形图
qq_39015698的博客
05-25 1376
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
canvas实现遮罩效果
08-11
这是自己做的一个小Demo，实现平行四边形的图片效果。通过canvas和css来实现的。
UE4 CanvasUI遮罩
05-30
UE4 CanvasUI遮罩UE4 CanvasUI遮罩UE4 CanvasUI遮罩UE4 CanvasUI遮罩UE4 CanvasUI遮罩UE4 CanvasUI遮罩
Jcrop截图canvas绘制圆形三角形多图片合成等一套完整操作.zip
08-13
在IT领域，前端开发经常涉及图像处理，而这套"Jcrop截图canvas绘制圆形三角形多图片合成等一套完整操作.zip"资源提供了一整套前端图片处理的方法。下面将详细讲解其中涉及的关键技术点。 首先，**Jcrop**是一个强大...
微信小程序canvas.drawImage完全显示图片问题的解决
10-17
对于在canvas上使用drawImage方法绘制图片时出现的不完全显示问题，本文将提供相应的解决方案。首先需要了解drawImage方法，这是canvas用于向画布上绘制图像的API。在微信小程序中，drawImage方法在使用时可能会因为...
JavaScript canvas绘制圆角矩形.html
12-22
Canvas 中文名称叫“画布”，它是游戏中所有UI组件的“容器”。一个场景中，可以允许多个Canvas对象的存在，还允许Canvas之间可以进行“嵌套”使用。需要注意的是，场景中的任何一个UI对象，都肯定是某个Canvas对象...
Android代码-遮罩对比图效果组件
08-06
BifacialView Gradle allprojects { repositories { maven { url 'https://jitpack.io' } } } dependencies {    implementation 'com.github.pavel163:BifacialView:1.4.0' } How to use To install the picture programmatically use: bifacialView.setDrawableLeft(drawableLeft); bifacialView.setDrawableRight(drawableRight); You can use xml attributes to control the appearance of arrows TouchMode ALL - reacts to the touch in any part of view. DELIMITER - reacts to a touch in the deli
Arctext弧形文字效果插件（CSS3&jQuery）
05-23
Arctext弧形文字效果插件（CSS3&jQuery）
arctext.js实现文字平滑弯曲弧形效果的插件
10-17
主要介绍了arctext.js实现文字平滑弯曲弧形效果的插件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
unity 弧形UI 圆形slider 圆形滑动条
12-12
unity 弧形UI 圆形slider 圆形滑动条 制作版本5.3 ugui 需要把预置体放到canvas上使用
canvas绘制扇形，可以改变数量、扇形角度、扇形方向
z_blackbear的博客
05-07 1516
canvas绘制扇形，支持调整扇形角度，扇形方向 createCanvas() { // 创建一个canvas标签，你也可以在html直接插入，通过document.getElementById(id)的方式获取 this.ele = document.createElement('canvas'); // 设置canvas标签的 id 属性 this.ele.id = 'myCanvas' // 设置c
用Canvas绘制圆弧与圆角（4）
small_ma
07-23 2397
用Canvas绘制圆弧与圆角（4） 首先清楚一点 角度 X (Math.PI/180) = 角度对应的弧度 arc(x, y, r, startRad, endRad, 弧形方向) 此方法用于绘制圆弧 弧形方向——1为逆时针，0为顺时针 ctx.arc(250, 250, 100, 0, Math.PI/2, 0); ctx.stroke(); arcTo(x1, y1,...
用canvas画布绘制扇形和弧线
m0_71814235的博客
06-21 1023
用canvas画布绘制扇形和弧线
html5 canvas 弧形描边渐变
weixin_30819085的博客
04-15 910
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
canvas的矩形，圆弧，扇形，文本基本用法+ 绘制病状图
Amanda_wmy的博客
08-01 1152
canvas的矩形，圆弧，扇形，文本基本用法+ 绘制病状图 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial
11【canvas 2/2】曲线的绘制+1/4个圆弧+右上角的1/4的扇形+一个圆分成六等分颜色随机+根据数据的饼图+在画布中心的一段文字+饼状图+帧动画+方向键控制的行走的小人+canvas的转换
南北极之间
05-01 1048
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 1.什么是弧度 是一种长度的描述单位 2.一个弧度怎么去描述 ...
vue如何实现在页面上画画_Vue使用Canvas绘制图片、矩形、线条、文字，下载图片...
最新发布
06-02
Vue 中可以使用 HTML5 的 Canvas API 来实现在页面上画画，可以通过在 Vue 组件中添加 canvas 元素，并在 mounted 钩子函数中获取其 2D 上下文来实现。 以下是一个实现在页面上画画的示例代码： ```html <template> <div> <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas> </div> </template> <script> export default { name: 'DrawCanvas', data() { return { isDrawing: false, lastX: 0, lastY: 0, ctx: null, } }, mounted() { this.ctx = this.$refs.canvas.getContext('2d'); }, methods: { startDrawing(e) { this.isDrawing = true; this.lastX = e.offsetX; this.lastY = e.offsetY; }, draw(e) { if (!this.isDrawing) return; this.ctx.beginPath(); this.ctx.moveTo(this.lastX, this.lastY); this.ctx.lineTo(e.offsetX, e.offsetY); this.ctx.stroke(); this.lastX = e.offsetX; this.lastY = e.offsetY; }, stopDrawing() { this.isDrawing = false; }, }, } </script> <style scoped> canvas { width: 100%; height: 100%; border: 1px solid #000; } </style> ``` 上面的代码中，我们在组件中添加了一个 canvas 元素，并为其添加了三个事件监听器，分别是 @mousedown、@mousemove 和 @mouseup，用于开始、绘制和停止绘制画画。 在 mounted 钩子函数中，我们获取了 canvas 元素的 2D 上下文，并将其保存在组件的 this.ctx 属性中。 在组件的 methods 中，我们定义了三个方法，分别是 startDrawing、draw 和 stopDrawing。 startDrawing 方法用于在鼠标按下时记录当前鼠标的位置，并将 isDrawing 属性设置为 true。 draw 方法用于在鼠标移动时绘制线条，如果 isDrawing 为 true，则使用 moveTo 和 lineTo 方法绘制一条线段，并将 lastX 和 lastY 属性更新为当前鼠标的位置。 stopDrawing 方法用于在鼠标松开时将 isDrawing 属性设置为 false，停止绘制画画。 最后，我们在组件的 template 中使用 ref 属性来获取 canvas 元素，并为其添加样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值