canvas简单的介绍

Posted 乐多呀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas简单的介绍相关的知识,希望对你有一定的参考价值。

<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简单的介绍的主要内容,如果未能解决你的问题,请参考以下文章

WPF之核心面板(容器)控件简单介绍

简单的圆形下载进度条

svg和canvas比较以及svg简单介绍

玩转 html5 ---- 用 canvas 结合脚本在画布上画简单的图 (html5 又一强大功能)

123

小程序各种功能代码片段整理---持续更新