canvas基础

最新推荐文章于 2024-05-14 16:27:26 发布

神龙大熊

最新推荐文章于 2024-05-14 16:27:26 发布

阅读量352

点赞数 1

分类专栏： HTML 文章标签：前端 html5

本文链接：https://blog.csdn.net/weixin_45925567/article/details/123455166

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

canvas

第1章画布元素的使用

绘制线条

1. 画布的作用

Canvas 元素作为HTML5标准的一部分，允许你通过脚本动态渲染图像。每一个 canvas 元素都有一个上下文环境对象，在其中可以绘制任意图形。

2. 坐标的介绍

在这里插入图片描述

3. 简单的使用

<body>
    <canvas id="cvs" style="border: solid 1px #ccc"></canvas>

    <script type="text/javascript">
        // 1.获取画布元素
        var cvs=document.getElementById("cvs");
        // 2.获取工具集
        var cxt=cvs.getContext("2d");
        // 3.定位开始点
        cxt.moveTo(30,30);
        // 4.拖动并结束点
        cxt.lineTo(90,30)  //保存内存
        // 5.绘制点
        cxt.stroke();
    </script>
</body>

4. 绘制不同线条颜色三角形

//设置笔触图形的颜色。context.strokeStyle=color
//设置线条的宽度，以像素为单位。context.lineWidth=number
//设置开始一条路径，或重置当前的路径。context.beginPath()

<body>
    <canvas id="cvs" style="border: solid 1px #ccc"></canvas>

    <script type="text/javascript">
        //获取画布元素
        var cvs=document.getElementById("cvs");
        //获取工具集
        var cxt=cvs.getContext("2d");
        //设置绘制图形的线条宽度
        cxt.lineWidth=5;

         
        //设置绘制图形的颜色
        cxt.strokeStyle='red';
        //定位一个起始点
        cxt.moveTo(50,50);
        //绘制第二个点
        cxt.lineTo(150,50)
        //绘制线条
        cxt.stroke()
        //重置当前路径
        cxt.beginPath();

        //设置绘制图形的颜色
        cxt.strokeStyle='blue';
        //设置绘制第二条线起始点
        cxt.moveTo(150,50);
        //绘制第二个点
        cxt.lineTo(80,100)
        //绘制线条
        cxt.stroke()
        //重置当前路径
        cxt.beginPath(); 

        //设置绘制图形的颜色
        cxt.strokeStyle='green';
        //设置绘制第二条线起始点
        cxt.moveTo(80,100);
        //返回原始点
        cxt.lineTo(50,50)
        //绘制线条
        cxt.stroke()

    </script>

第2章其他绘制API

1. 文字绘制API

方法：context.fillText(text,x,y,[maxWidth]); //在指定位置和宽度内绘制文字，max最大宽度
属性：

context.font=‘字体属性’ //设置字体名称和形状
context.textAlign=‘水平方位值’ //center | left | right //设置文本内容对齐方式
context.textBaseline=‘垂直方位值’ //top | middle | bottom
注意：所有的属性都要在绘制之前设置

<body>
    <canvas id="cvs" style="border: solid 1px #ccc"></canvas>
    <script type="text/javascript">
        //获取画布元素
        var cvs=document.getElementById("cvs");
        //获取工具集
        var cxt=cvs.getContext("2d");
        //设置文字的样式
        cxt.font='bold 20px 黑体';
        
        cxt.strokeStyle='red';
        cxt.moveTo(10,30);
        cxt.lineTo(120,30);
        cxt.stroke();

        cxt.beginPath();
        cxt.moveTo(30,10);
        cxt.lineTo(30,120);
        cxt.stroke();
       
        //水平方向居中对齐
        cxt.textAlign='center';
        //垂直方向居中对齐
        cxt.textBaseline='middle';
        //调用工具集中的API绘制文字
        cxt.fillText('画布',30,30);
        //将绘制内容另存为图片
        var imgUrl=cvs.toDataURL('image/png',1);
        //输出到控制台
        console.log(imgUrl);
    </script>
</body>

问答区：fillText和strokeText的区别

2. 绘制矩形和圆形及图片

绘制矩形和圆形

//绘制矩形的路径
context.rect(x,y,width,height);
//绘制无填充的矩形
context.strokeRect(x,y,width,height);
//绘制填充的矩形
context.fillRect(x,y,width,height);
//清空指定矩形内像素
context.clearRect(x,y,width,height);
//在指定位置绘制一个圆形
context.arc(x,y,r,sAngle,eAngle,clockwise);

<body>
    <canvas id="cvs" style="border: solid 1px #ccc"></canvas>
    <script type="text/javascript">
        //获取画布元素
        var cvs=document.getElementById("cvs");
        //获取工具集
        var cxt=cvs.getContext("2d");
        
        //先绘制路径
        //cxt.rect(30,30,50,50);
        //再描边
        //cxt.stroke();
        //再填充
        //cxt.fill();
        //调用一次方法完成
        //cxt.strokeRect(30,30,50,50);

        cxt.fillRect(30,30,50,50);
        //清空绘制好的正方形
        cxt.clearRect(30,30,50,50);
        //绘制一个半径为30的圆形
        cxt.arc(50,50,30,0,Math.PI,true);
        //绘制圆形的边
        cxt.fill();
    </script>
</body>

绘制图片

//在画布上绘制固定坐标的图像
context.drawImage(img,x,y);
//在画布上绘制不仅固定坐标，且规定图像的宽度和高度图像
context.drawImage(img,x,y,width,height);
//在画布上剪切图像，并在画布上绘制被剪切的部分
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

<body>
    <canvas id="cvs" width="320" height="480" style="border: solid 1px #ccc"></canvas>
    <script type="text/javascript">
        //获取画布元素
        var cvs=document.getElementById("cvs");
        //获取工具集
        var cxt=cvs.getContext("2d");

        //先定义图片对象
        var img=new Image();
        img.src='img/dog.jpg';
        img.onload=function(){
            //绘制加载好的图片
            //cxt.drawImage(this,10,10);
            //绘制加载好的指定宽高的图片
            //cxt.drawImage(this,10,10,133,200);
             //绘制加载放大的图片
            cxt.drawImage(this,120,120,100,100,10,10,300,300);
        }
    </script>
</body>