首页 > 代码库 > canvas简单的介绍

canvas简单的介绍

2024-09-05 07:18:19   218人阅读

<canvas></canvas> 标签定义图形，比如图表和其他图像;它只是图形容器，您必须使用脚本来绘制图形。

所以使用canvas,主要是写很多javaScript来实现它的功能.

使用canvas,首先要定义canvas画布在body里面的范围:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>canvas介绍</title>
 6 </head>
 7 <body>
 8 
 9     <canvas width="600" height="800" style="background: yellow" id="canvas">
10         您的浏览器版本不支持canvas标签
11     </canvas>
12 </body>
13 </html>

在这里width是画布的宽,height是画布的高,style是画布的样式,id即是canvas的表示,方便javaScript获取DOM对象.

在这里主要讲一下基本的图形画法:

<script>
        //获取画布的DOM, canvas还不可以操作
        var canvas = document.getElementById(‘canvas‘);
        //设置绘图环境,2d是一个标准
        var cxt = canvas.getContext(‘2d‘);

        //画一条线段
            //设定画笔的宽度
            cxt.lineWidth = 10;
            //画笔的颜色
            cxt.strokeStyle = "#ff9900";
            //有一个开始的位置,需要一个坐标,(20,20)表示左上角往有数20,往下数20
            cxt.moveTo(20,20);
            //设置划线的方式,需要一个坐标,横线是x改变,y不变,竖线是x不变,y改变
            cxt.lineTo(100,20);
            cxt.stroke();
            //封闭路径
            cxt.closePath();


        //画一个圆型,凡是路径图形必须先开始路径,画完之后必须结束路径
            // 第一个和第二个参数是圆心的坐标点,
            // 第三个参数是半径,
            // 第四个和第五个参数是表示范围,如果是半圆就是0到180,整圆就是0到360
            // 最后一个是表示是顺时针还是逆时针,false表示逆时针,true表示顺时针
            cxt.beginPath();
            cxt.lineWidth = 3;
            cxt.strokeStyle = ‘red‘;
            cxt.arc(200,200,50,0,360,false);
            cxt.stroke();
            cxt.closePath();

        //画一个实心圆
            cxt.beginPath();
            cxt.fillStyle = ‘blue‘;
            cxt.arc(200,80,50,0.360,false);
            cxt.fill();
            cxt.stroke();
            cxt.closePath();


        //画一个矩形(不需要开始和结束路径)
            cxt.rect(300,20,100,100);
            cxt.stroke();
        //其他方法
        cxt.strokeRect(300,150,100,100);


        //实心矩形
            cxt.beginPath();
            cxt.rect(300,380,100,100);
            cxt.fill();
            cxt.closePath();
            //其他方法
            cxt.fillRect(420,380,100,100);

        //设置文字
            cxt.font = "40px 黑体";
            cxt.fillText("这是一个字符串",20,300);
            cxt.lineWidth = 1;
       　　　//在这里设置空心字    
　　　　　　　 cxt.strokeText("这是一个字符串",20,350);


        //画图,把一幅图片画到画布
            var img= new Image();
            img.src = "";
            cxt.drawImage(img,20,370,230,306);

        //画一个三角形,可以根据自己的需要设置坐标,画三角形的话必须要先关闭路径,再画图
            cxt.beginPath();
            cxt.moveTo(350,500);
            cxt.lineTo(320,600);
            cxt.lineTo(500,600);
            cxt.closePath();
            cxt.stroke();
    </script>

 

canvas简单的介绍


联系
我们