关于canvas一些小demo

这篇博客探讨了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);
     
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值