canvas②

最新推荐文章于 2024-04-26 15:43:03 发布
最新推荐文章于 2024-04-26 15:43:03 发布
阅读量318 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/onepunchmen00/article/details/78013743
版权

封装一个矩形绘制函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>矩形绘制函数</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
  window.onload = function () {
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      canvas.height = 768;
      canvas.width = 1024;

      render(200,200,200,200,5,"#000","blue",context);
  };

    function render(x,y,width,height,borderwidth,bordercolor,fillcolor,ctx) {
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x+width,y);
        ctx.lineTo(x+width,y+height);
        ctx.lineTo(x,y+height);

        ctx.closePath();
        ctx.lineWidth = borderwidth;
        ctx.strokeStyle = bordercolor;
        ctx.fillStyle = fillcolor;

        ctx.fill();
        ctx.stroke();
    }
</script>
</body>
</html>


简洁的写法直接用这个方式代替路径的四条语句

ctx.rect(x,y,width,height);

另有ctx.fillRect 和ctx.strokeRect的简写方法参数同上

线条形状 
context.lienCap = "xx"；




画一个五角星





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
  window.onload = function () {
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      canvas.height = 800;
      canvas.width = 800;

      drawStar(300,300,100,450,context,-30);
      function drawStar(x,y,r,R,cxt ,rotate) {
          cxt.beginPath();

          for(var i=0;i<5;i++){
              cxt.lineTo(Math.cos((18 + i * 72 - rotate) / 180 * Math.PI ) * R + x,
                  - Math.sin((18 + i * 72- rotate) / 180 * Math.PI ) * R+ y ) ;/*18为第一个角度 i*72为第i个增加的角度  /180转为pi  300是半径 400是因为算角度的时候圆点假设为0,0*/
              cxt.lineTo(Math.cos((54 + i * 72- rotate) / 180 * Math.PI ) * r + x,
                  - Math.sin((54 + i * 72- rotate) / 180 * Math.PI ) * r + y ) /*18为第一个角度 i*72为第i个增加的角度  /180转为pi  300是半径 400是因为算角度的时候圆点假设为0,0*/
          }

          cxt.closePath();
          cxt.lineWidth = 10;
          cxt.stroke();
      }

  };


</script>
</body>
</html>








<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
  window.onload = function () {
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      canvas.height = 800;
      canvas.width = 800;
        context.fillStyle = "black";
        context.fillRect(0,0,canvas.width,canvas.height);

        for(var i = 0 ; i < 200 ; i++){
            var r = Math.random() * 10 + 10;/*最大为20*/
            var x = Math.abs(Math.random()*canvas.width-2*r)+r;/*这样设置可以保证小星星一直在画布内*/
            var y = Math.abs(Math.random()*canvas.height-2*r)+r;
            var a = Math.random() * 360;
            drawStar(x,y,r,r/2.0,context,a);
         }

      function drawStar(x,y,r,R,cxt ,rotate) {
          cxt.beginPath();

          for(var i=0;i<5;i++){
              cxt.lineTo(Math.cos((18 + i * 72 - rotate) / 180 * Math.PI ) * R + x,
                  - Math.sin((18 + i * 72- rotate) / 180 * Math.PI ) * R+ y ) ;/*18为第一个角度 i*72为第i个增加的角度  /180转为pi  300是半径 400是因为算角度的时候圆点假设为0,0*/
              cxt.lineTo(Math.cos((54 + i * 72- rotate) / 180 * Math.PI ) * r + x,
                  - Math.sin((54 + i * 72- rotate) / 180 * Math.PI ) * r + y ) /*18为第一个角度 i*72为第i个增加的角度  /180转为pi  300是半径 400是因为算角度的时候圆点假设为0,0*/
          }
          cxt.closePath();
          var Color="rgba("+
              Math.floor(Math.random()*255)+","+
              Math.floor(Math.random()*255)+","+
              Math.floor(Math.random()*255)+","+
              (Math.random()*0.3+0.5)+ ")";
          cxt.fillStyle=Color;
          cxt.strokeStyle = Color;
          cxt.lineJoin = "round";
          cxt.lineWidth = 3;
          cxt.fill();
          cxt.stroke();

      }

  };


</script>
</body>
</html>






translate

将0,0点移到了100,100  也就是下面的0,0其实是画布的100,100

如果有translate  scale  rotate 图形变换操作 使用save restore 保存状态 以免互相影响



fillstyle渐变

代码

结果如下

修改后的星空图  （背景渐变  大小调整 ）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    window.onload = function () {
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        canvas.height = 800;
        canvas.width = 800;
        var skyStyle = context.createLinearGradient(0,0,0,canvas.height);
        skyStyle.addColorStop(0.0, 'black');
        skyStyle.addColorStop(1.0, '#035');
        context.fillStyle = skyStyle;
        context.fillRect(0,0,canvas.width,canvas.height);

        for(var i = 0 ; i < 200 ; i++){
            var r = Math.random() * 5 + 5;/*最大为20*/
            var x = Math.abs(Math.random()*canvas.width-2*r)+r;/*这样设置可以保证小星星一直在画布内*/
            var y = (Math.abs(Math.random()*canvas.height-2*r)+r) * 0.65;
            var a = Math.random() * 360;
            drawStar(x,y,r,r/2.0,context,a);
        }

        function drawStar(x,y,r,R,cxt ,rotate) {
            cxt.beginPath();

            for(var i=0;i<5;i++){
                cxt.lineTo(Math.cos((18 + i * 72 - rotate) / 180 * Math.PI ) * R + x,
                    - Math.sin((18 + i * 72- rotate) / 180 * Math.PI ) * R+ y ) ;/*18为第一个角度 i*72为第i个增加的角度  /180转为pi  300是半径 400是因为算角度的时候圆点假设为0,0*/
                cxt.lineTo(Math.cos((54 + i * 72- rotate) / 180 * Math.PI ) * r + x,
                    - Math.sin((54 + i * 72- rotate) / 180 * Math.PI ) * r + y ) /*18为第一个角度 i*72为第i个增加的角度  /180转为pi  300是半径 400是因为算角度的时候圆点假设为0,0*/
            }
            cxt.closePath();
            var Color="rgba("+
                Math.floor(Math.random()*255)+","+
                Math.floor(Math.random()*255)+","+
                Math.floor(Math.random()*255)+","+
                (Math.random()*0.3+0.5)+ ")";
            cxt.fillStyle=Color;
            cxt.strokeStyle = Color;
            cxt.lineJoin = "round";
            cxt.lineWidth = 3;
            cxt.fill();
            cxt.stroke();

        }

    };


</script>
</body>
</html>


径向渐变
 
400,400,0 为第一个圆坐标400,400 半径0  也就是个圆点
后面400,400,500  为第二个圆的坐标和半径
结果



图片填充

还可以使用另外一个canvas来填充





绘制圆弧





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆弧</title>
</head>
<body>
<canvas id="canvas" style="display: block;margin: 50px auto;"></canvas>
<script>
    window.onload = function () {
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        canvas.width =  800;
        canvas.height = 800;
        drawRoundRect(context,100,100,600,600,50)
    };

function drawRoundRect(cxt,x,y,width,height,radius) {
        cxt.save();
        cxt.translate(x , y);
        pathRoundRect(cxt,width,height,radius);
        cxt.strokeStyle = "black";
        cxt.stroke();
        cxt.restore();
}

function pathRoundRect(cxt,width,height,radius) {
    cxt.beginPath();

    cxt.arc(width - radius, height - radius , radius , 0 , Math.PI / 2);
    cxt.arc(radius, height - radius , radius , Math.PI / 2, Math.PI );
    cxt.arc(radius , radius , radius , Math.PI , Math.PI *3 / 2);
    cxt.arc(width - radius ,radius ,radius , Math.PI *3 / 2 , Math.PI * 2);

    cxt.closePath();
}
</script>
</body>
</html>

改进 判断输入的填充颜色  和防止输入半径过大








arcTo（）






绘制弯月



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>月亮</title>
</head>
<body>
<canvas id="canvas" style="display: block;margin: 50px auto;"></canvas>
<script>
    window.onload = function () {
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        canvas.width =  800;
        canvas.height = 800;
        context.arc(400,400,300,0.5*Math.PI,1.5*Math.PI,true); /*月亮外圆*/
        context.moveTo(400,100);
        context.arcTo(1200,400,400,700,(400-100)*dis(400,100,1200,400) /(1200 -400));
        context.stroke();
    };

function dis(x1,y1,x2,y2) {
    return Math.sqrt((x1-x2) * (x1-x2)+(y1-y2) * (y1-y2));
}
</script>
</body>
</html>


改进

有个*半径  因为半径为1就省略了




花江夏树
关注
特殊符号大全
weixin_34390996的博客
03-13 5736
数字符号 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳ ⑴ ⑵ ⑶ ⑷ ⑸ ⑹ ⑺ ⑻ ⑼ ⑽ ⑾ ⑿ ⒀ ⒁ ⒂ ⒃ ⒄ ⒅ ⒆ ⒇ ⒈ ⒉ ⒊ ⒋ ⒌ ⒍ ⒎ ⒏ ⒐ ⒑ ⒒ ⒓ ⒔ ⒕ ⒖ ⒗ ⒘ ⒙ ⒚ ⒛ ㊀ ㊁ ㊂ ㊃ ㊄ ㊅ ㊆ ㊇ ㊈ ㊉ ㈠ ㈡ ㈢ ㈣ ㈤ ㈥ ㈦ ㈧ ㈨ ㈩...
canvas画布
qq_42815580的博客
06-28 392
canvas一、介绍二、操作步骤三、绘制直线四、绘制矩形五、绘制圆形 一、介绍 canvas元素可以在网页中创建一块矩形区域，这块矩形区域被称为画布，可在其中绘制各种图形 默认情况下canvas元素创建的画布区域大小为宽300px，高150px 二、操作步骤 ①. 在HTML5页面中添加canvas元素，必须定义canvas元素的id属性值 <canvas id="myCanvas"></canvas> ②. js脚本中使用document.getElementById()方法，根
带圈数字和常用数学符号怎么写（上标、下标）
热门推荐
weixin_42610770的博客
02-17 1万+
常用数学符号怎么写（上标、下标）
canvas总结
m0_46549742的博客
07-16 342
一、什么是canvas？ HTML5 <canvas> 元素用于图形的绘制，通过脚本 (JavaScript)来完成。可以通过多种方法使用 canvas 绘制路径,矩形、圆、字符等。 注：<canvas> 标签只是图形容器，必须使用脚本来绘制图形。 ...
Canvas详解
墨玉浮白的博客
12-05 508
文章目录一、概念二、常用api类型2.1 绘制集合图形，文本，位图等2.2 位置、形状变换2.2.1 平移操作2.2.2 缩放操作2.2.3 旋转操作2.2.4 倾斜操作2.2.5 切割2.2.6 矩阵2.3 状态保存和恢复三、案例 一、概念 画布，通过画笔绘制几何图形、文本、路径和位图等。 二、常用api类型 常用api分为绘制、变换、状态保存和恢复 2.1 绘制集合图形，文本，位图等 //在指...
Canvas笔记
qq_45775968的博客
04-08 294
Canvas笔记1 1.canvas概述
②Canvas直线图形
Yaro的博客
04-07 196
从上一节我们已经知道，可以用moveTo()和lineTo()配合使用来画一个矩形。但是这种画矩形的代码量过多，因此在实际开发中并不推荐使用。而对于绘制矩形，Canvas为我们提供了独立的方法来实现。在Canvas中，矩形分为“描边矩形”和“填充矩形”。（1）“描边矩形”在canvas中，我们可以将strokeStyle属性和strokeRect()方法配合使用来画一个“描边矩形”。    语法如...
canvas
qq_42673250的博客
11-20 1213
canvas
HTML5 Canvas核心技术源码技术代码
03-27
Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、...
Android canvas
zenmela2011的专栏
03-13 1万+
1.Canvas Canvas是一个画布，可以在这个画布上进行各种绘图操作。 在Android中，想要获得一个Canvas对象主要有三种方法： ①继承一个View，并重写onDraw()方法。View的Canvas对象会被当做参数传递过来，在这个Canvas上进行的操作会直接反映在View中。 ②调用SurfaceHolder.lockCanvas()返回一个Canvas对象。 ③通过构造方法自己创建一个Canvas对象。 Bitmap bitmap = Bitmap.createBitmap(1
Canvas-lms 开源在线学习管理系统源码部署（生产版）_canvas lms(1)
2303_79055586的博客
04-26 449
在canvas安装根目录执行下面命令即可，执行命令后， 会要求你设置 canvas 默认管理员登录的电子邮件地址 和 登录密码， 还会设置一个登陆后的提示名称， 通常是您的组织名称，最后选择是否向canvas开发团队反馈使用信息：opt_in 所有信息，opt_out 不反馈任何信息 或 匿名反馈。），以及尝试 Docker部署， 整整七天， 做过无数次尝试，遇到过各种错误，几经奔溃边缘， 有解决的也有没解决的， 但幸运的是最终生产版成功了，恭喜各位付出过努力的人！
html转换成canvas文字空白,html2canvas.js——HTML转Canvas工具
weixin_39623411的博客
05-30 1087
我们经常会遇上动态生成海报的需求，而在Web前端中，生成图片非Canvas莫属。但是在实际工作当中，为了追求效率，我们会不可避免地去使用一些JS插件，而html2canvas.js就是一款优秀的插件，它可以轻松地帮你将HTML代码转换成Canvas，进而生成可保存分享的图片。具体如何使用这款插件呢？接下来请让我用一个简单的示例来为大家讲解。现在假设要生成如下图片，而所有图片和文字都是动态获取的。按...
智慧旅游景区解决方案PPT(50页).pptx
最新发布
09-21
智慧旅游解决方案利用云计算、物联网和移动互联网技术，通过便携终端设备，实现对旅游资源、经济、活动和旅游者信息的智能感知和发布。这种技术的应用旨在提升游客在旅游各个环节的体验，使他们能够轻松获取信息、规划行程、预订票务和安排食宿。智慧旅游平台为旅游管理部门、企业和游客提供服务，包括政策发布、行政管理、景区安全、游客流量统计分析、投诉反馈等。此外，平台还提供广告促销、库存信息、景点介绍、电子门票、社交互动等功能。 智慧旅游的建设规划得到了国家政策的支持，如《国家中长期科技发展规划纲要》和国务院的《关于加快发展旅游业的意见》，这些政策强调了旅游信息服务平台的建设和信息化服务的重要性。随着技术的成熟和政策环境的优化，智慧旅游的时机已经到来。 智慧旅游平台采用SaaS、PaaS和IaaS等云服务模式，提供简化的软件开发、测试和部署环境，实现资源的按需配置和快速部署。这些服务模式支持旅游企业、消费者和管理部门开发高性能、高可扩展的应用服务。平台还整合了旅游信息资源，提供了丰富的旅游产品创意平台和统一的旅游综合信息库。 智慧旅游融合应用面向游客和景区景点主管机构，提供无线城市门户、智能导游、智能门票及优惠券、景区综合安防、车辆及停车场管理等服务。这些应用通过物联网和云计算技术，实现了旅游服务的智能化、个性化和协同化，提高了旅游服务的自由度和信息共享的动态性。 智慧旅游的发展标志着旅游信息化建设的智能化和应用多样化趋势，多种技术和应用交叉渗透至旅游行业的各个方面，预示着全面的智慧旅游时代已经到来。智慧旅游不仅提升了游客的旅游体验，也为旅游管理和服务提供了高效的技术支持。
智慧旅游实景三维智慧景区建设方案PPT(70页).pptx
09-21
智慧旅游解决方案利用云计算、物联网和移动互联网技术，通过便携终端设备，实现对旅游资源、经济、活动和旅游者信息的智能感知和发布。这种技术的应用旨在提升游客在旅游各个环节的体验，使他们能够轻松获取信息、规划行程、预订票务和安排食宿。智慧旅游平台为旅游管理部门、企业和游客提供服务，包括政策发布、行政管理、景区安全、游客流量统计分析、投诉反馈等。此外，平台还提供广告促销、库存信息、景点介绍、电子门票、社交互动等功能。 智慧旅游的建设规划得到了国家政策的支持，如《国家中长期科技发展规划纲要》和国务院的《关于加快发展旅游业的意见》，这些政策强调了旅游信息服务平台的建设和信息化服务的重要性。随着技术的成熟和政策环境的优化，智慧旅游的时机已经到来。 智慧旅游平台采用SaaS、PaaS和IaaS等云服务模式，提供简化的软件开发、测试和部署环境，实现资源的按需配置和快速部署。这些服务模式支持旅游企业、消费者和管理部门开发高性能、高可扩展的应用服务。平台还整合了旅游信息资源，提供了丰富的旅游产品创意平台和统一的旅游综合信息库。 智慧旅游融合应用面向游客和景区景点主管机构，提供无线城市门户、智能导游、智能门票及优惠券、景区综合安防、车辆及停车场管理等服务。这些应用通过物联网和云计算技术，实现了旅游服务的智能化、个性化和协同化，提高了旅游服务的自由度和信息共享的动态性。 智慧旅游的发展标志着旅游信息化建设的智能化和应用多样化趋势，多种技术和应用交叉渗透至旅游行业的各个方面，预示着全面的智慧旅游时代已经到来。智慧旅游不仅提升了游客的旅游体验，也为旅游管理和服务提供了高效的技术支持。
基于深度学习实现的半监督学习例子.zip
09-21
深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
关于APx测试耳机音频的参数设置及步骤 关于APx测试耳机音频的参数设置及步骤
09-21
关于APx测试耳机音频的参数设置及步骤 关于APx测试耳机音频的参数设置及步骤
jQuery背景可滑动的导航菜单代码，鼠标经过导航时导航背景可滑动，兼容主流浏览器
09-21
jQuery背景可滑动的导航菜单代码，鼠标经过导航时导航背景可滑动，兼容主流浏览器 使用方法： 1、引入reset.css、index.css、jquery-1.7.2.min.js库文件，及jquery.movebg.js插件 2、在文件中加入<!-- 代码 开始 --><!-- 代码 结束 -->区域代码 3、移动的滑动可根据需要自由修改外观
HTML5 Canvas技术详解
通过JavaScript，开发者可以利用Canvas元素来动态地绘制、修改和操作图像。这个技术对于创建数据可视化、游戏、艺术作品以及其他需要动态图形的应用来说尤其有用。 本书《HTML5 Canvas》分为多个章节，涵盖了以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值