关于canvas一些小demo

最新推荐文章于 2021-05-11 15:12:02 发布

As Before ~

最新推荐文章于 2021-05-11 15:12:02 发布

阅读量213

点赞数

分类专栏：开发成长记录文章标签： canvas绘制 canvas图形非零环绕 canvas动画矩形 canvas绘制图片 canvas随机折线图

本文链接：https://blog.csdn.net/happyStudy_/article/details/94555486

版权

这篇博客探讨了canvas的基础知识，包括初始化尺寸、线条样式、非零环绕规则的应用、渐变效果的实现以及动画矩形的创建。此外，还涉及了canvas如何绘制文字、处理图片不失真以及绘制随机折线图的实例。

摘要由CSDN通过智能技术生成

canvas会初始化宽度为300像素和高度为150像素。可以使用CSS来定义大小

最简单的例子：

<canvas width="600" height="400"></canvas>

<script type="text/javascript">
   
   //获取画布
   var canvas=document.querySelector("canvas");

   //获取画布上下文对象
   var ctx=canvas.getContext("2d");

   //绘图步骤： 落笔点->连线->描边
   
   ctx.moveTo(100, 100);  //落笔
   ctx.lineTo(100, 300);  //连线
   ctx.stroke();        //描边

</script>

给线条设置样式

strokeStyle设置颜色，lineWidth设置宽度

<script type="text/javascript">
   var cans=document.querySelector("canvas");
   var ctx=cans.getContext("2d");
   //绘制一条线宽为10像素的红色直线
    ctx.strokeStyle="red";
    ctx.lineWidth="10";

    ctx.moveTo(100, 100);
    ctx.lineTo(300, 100);
    ctx.stroke();

</script>

设置线条的连接方式lineJoin

beginPath 开启新的图层

<script type="text/javascript">
    //获取canvas画布对象
    var canvas =document.querySelector("canvas");
    //获取绘图上下文
    var ctx=canvas.getContext("2d");

       ctx.lineWidth="20";
       ctx.strokeStyle="red";

       // 设置线的链接方式
       ctx.lineJoin="miter";
        ctx.moveTo(100, 50);
        ctx.lineTo(200, 100);
        ctx.lineTo(100, 150);
        ctx.stroke();


        ctx.beginPath();
         // 设置线的链接方式
        ctx.lineJoin="round";
        ctx.strokeStyle="blue";
        ctx.lineWidth="20";
        ctx.moveTo(250, 50);