首页 HTML/CSS正文

canvas基础

景先 HTML/CSS 2016-01-01 688 0

今天整理了一份canvas的学习心得,具体请看下列代码及知识点。

canvas是一种html5新增的绘图标签,类似于img,兼容IE9+,chrom,FF等主流浏览器。

主要是通过js来进行绘图 canvas定义宽高必须用属性的方式写不能使用css


基础

画笔:var gd = oC.getContext('2d');//所有和绘图有关的属性,方法都在这里面

路径:(特别类似于ps,选取)------->必须描边,填充

gd.moveTo(x,y);  //移动到哪里去

gd.moveTo(x,y);  //连接到哪里去

描边:gd.stroke();

填充:gd.fill();

填充颜色: gd.fillStyle='red/#ccc/rgb/rgba'

描边颜色: gd.strokeStyle='red/#ccc/rgb/rgba';

线宽:  gd.lineWidth=number;     这个属性的宽度是从中间向两边扩展的
闭合路径:
    好处:自动找到起始点
    gd.closePath();
    开始路径:

     gd.beginPath();   从新开始画

    基本流程:

     gd.beginPath() //开始画图
    //画图过程

    gd.closePath() //可选
    gd.stroke();
  * 路径理论上可以画任何图形(坐标)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas1</title>
    <style>
        body{
            background: #000;
        }
        canvas{
            background: #fff;
        }
        span{
            color: #fff;
        }
    </style>
    <script>
        window.onload=function(){
            var oC=document.getElementById('c1');

            var gd=oC.getContext('2d');

            gd.strokeStyle='red';
            gd.lineWidth=10;
            gd.beginPath();   
            
            gd.moveTo(197,250);

            gd.lineTo(272,99);

            gd.lineTo(347,250);

            gd.closePath();  //闭合路径

            gd.stroke(); 


        };
    </script>
</head>
<body>
    <canvas id="c1" width="800" height="600">
    </canvas>
</body>
</html>


通过以上简单的几个属性,下面写一个建议的绘图板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>建议绘图板demo</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #000;
        }
        canvas{
            background: #fff;
        }
        span{
            color: #fff;
        }
    </style>
    <script>
        function rnd(n,m){
            return parseInt(Math.random()*(m-n)+n);
        }
        window.onload=function(){
            var oC=document.getElementById('c1');

            var gd=oC.getContext('2d');

            oC.onmousedown=function(ev){
                gd.moveTo(ev.clientX,ev.clientY);

                document.onmousemove=function(ev){
                    gd.lineTo(ev.clientX,ev.clientY);
                    gd.stroke();
                };

                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;


                };
            };
        };
    </script>
</head>
<body>
    <canvas id="c1" width="800" height="600">
    </canvas>
</body>
</html>


矩形

矩形:自带矩形
gd.strokeRect(x,y,w,h);描边矩形

x,y:左上角的点
w,h:宽 , 高
gd.fillRect = (x,y,w,h)可填充矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas矩形</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #000;
        }
        canvas{
            background: #fff;
        }
        span{
            color: #fff;
        }
    </style>
    <script>
        function rnd(n,m){
            return parseInt(Math.random()*(m-n)+n);
        }
        window.onload=function(){
            var oC=document.getElementById('c1');

            var gd=oC.getContext('2d');

            //1.
            gd.fillStyle='red';
            gd.lineWidth=10;

            gd.fillRect(100,100,300,100);
            gd.strokeRect(100,100,300,100);


            //2.
            gd.strokeRect(200,50,100,300);
            gd.fillRect(200,50,100,300);
        };
    </script>
</head>
<body>
    <canvas id="c1" width="800" height="600">
    </canvas>
</body>
</html>

根据上述的几个知识点,写了一个关于建议柱状图的demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱状图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #000;
        }
        canvas{
            background: #fff;
            padding: 50px;
        }
        span{
            color: #fff;
        }
    </style>
    <script>
        function rnd(n,m){
            return parseInt(Math.random()*(m-n)+n);
        }
        window.onload=function(){
            var oC=document.getElementById('c1');

            var gd=oC.getContext('2d');

            var arr=[120,300,200,90,50,150,50];
            //从数组中挑选一个最大值出来
            var iMax=Math.max.apply(null,arr);
            
            
            //根据上述最大值算出比例高度
            var aHeight=[];
            for(var i=0; i<arr.length; i++){
                aHeight[i]=arr[i]/iMax*oC.height;
            }


            var w=oC.width/(arr.length*3-2);//一个柱子的宽度
            var space=w*2;//每个柱子间的距离定成当前柱子的宽度的2倍

            for(var i=0; i<aHeight.length; i++){
                gd.fillStyle='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
                gd.strokeRect(i*w+i*space,oC.height-aHeight[i],w,aHeight[i]);
                gd.fillRect(i*w+i*space,oC.height-aHeight[i],w,aHeight[i]);
            }
        };
    </script>
</head>
<body>
    <canvas id="c1" width="700" height="500">
    </canvas>
</body>
</html>




版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论