Canvas学习总结（1）

最新推荐文章于 2022-11-08 16:22:43 发布

juzipchy

最新推荐文章于 2022-11-08 16:22:43 发布

阅读量475

点赞数

文章标签： canvas

本文链接：https://blog.csdn.net/juzipchy/article/details/53837144

版权

标签：

绘制环境：
getContext(“2d”）：目前支持2D的场景

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
span{ color:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');  //webgl : 3D绘图

};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
    <span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</body>
</html>

中间的白正方形是canvas的画布，绘制的图形都在此方块内
这里写图片描述

绘制方块:
fillRect（L，T，W，H）：默认颜色是黑色
strokeRect（L，T，W，H）：带边框的黑块，默认是1px的黑色边框

设置绘图：
fillStyle：填充颜色（绘制canvas是有顺序的，先填充颜色和先绘边框，得到的图形是不一样的，原因在于canvas绘制的图形是层层叠加的）
lineWidth：线宽度，是一个数值
strokeStyle：边线颜色

body和style部分与上面的代码相同，js部分如下，展现以上提到的四点特性：

window.onload = function(){
    var oC = document.getElementById('c1'); 
    var oGC = oC.getContext('2d');  
    oGC.fillStyle = 'red';
    oGC.strokeStyle = 'blue';
    oGC.lineWidth = 10; 
    oGC.fillRect(50,50,100,100);
    oGC.strokeRect(50.5,50.5,100,100);
};

这里写图片描述
此方块距离左边和上边的距离为50px,长和宽都是100px,border为10px,若换一下oGC.fillRect(50,50,100,100)和oGC.strokeRect(50.5,50.5,100,100)的位置得到的图形是不一样的。

边界绘制：
lineJoin:边界连接点的样式
meter（默认）、round（圆角）、bevel（斜角）

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oGC.fillStyle = 'red';
    oGC.strokeStyle = 'blue';
    oGC.lineWidth = 10;
    oGC.lineJoin = 'bevel';
    oGC.fillRect(50,50,100,100);
    oGC.strokeRect(50.5,50.5,100,100);

};

边界点为圆角：
这里写图片描述

lineCap：端点样式
butt（默认）、round（圆角）、square（高度多出宽度一半的值）

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  

    oGC.lineWidth = 20;
    oGC.lineCap = 'square';
    oGC.moveTo(100,100);
    oGC.lineTo(200,200);
    oGC.stroke();
};

这里写图片描述

绘制路径
beginPath:开始绘制路径
closePath:结束绘制路径
moveTo:移动到绘制的新目标点
lineTo：新的目标点

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oGC.beginPath();//开始绘制路径
    oGC.moveTo(100,100);//绘制路径的起点，即第一点
    oGC.lineTo(200,200);//绘制路径的第二点
    oGC.lineTo(300,200);//路径的第三点
    oGC.closePath();//闭合路径
    oGC.stroke();//将路径用线段连接起来

    oGC.beginPath();//重新开始绘制路径
    oGC.moveTo(100,200);//第一点
    oGC.lineTo(200,300);//第二点
    oGC.lineTo(300,300);//第三点
    oGC.closePath();//闭合路径
    oGC.fill();//填充路径
};

绘制路径：
stroke:划线，默认黑色
fill：填充，默认黑色
rect：矩形区域
clearRect：清屏，删除一个画布的矩形区域
save：保存路径
reStore：恢复路径

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oGC.beginPath();
    oGC.rect(100,100,100,100);//矩形区域，起始点（100,100）,长和宽为100px
    oGC.closePath();
    oGC.fill();
    oGC.clearRect(0,0,oC.width,oC.height); //清除整个画布所有的区域 
};

清屏后，整个画布为空白的。

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oGC.save();//保存路径，
    oGC.fillStyle = 'red';//填充的红色只能在以下的代码中运用
    oGC.beginPath();
    oGC.moveTo(100,100);
    oGC.lineTo(200,200);
    oGC.lineTo(300,200);
    oGC.closePath();
    oGC.fill();
    oGC.restore();//恢复路径，以上为填充红色的运用范围


    oGC.beginPath();
    oGC.moveTo(100,200);
    oGC.lineTo(200,300);
    oGC.lineTo(300,300);
    oGC.closePath();
    oGC.fill();//默认为黑色
};

这里写图片描述

根据以上所学，进行一些简单的小案例
实例1：
在画布中，用鼠标绘画，显示出鼠标的轨迹

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oC.onmousedown = function(ev){
        var ev = ev || window.event;
        //鼠标在画布的坐标为鼠标的坐标减去画布的margin
        oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
        document.onmousemove = function(ev){
            var ev = ev || window.event;
            oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
            oGC.stroke();
        };
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        };
    };
};

实例2:
运动的小方块

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    var num = 0;
    oGC.fillRect(0,0,100,100);
    setInterval(function(){
        num++;
        //必须清屏，去掉之前的小方块的运动轨迹，要不然会重叠
        oGC.clearRect(0,0,oC.width,oC.height);
        oGC.fillRect(num,num,100,100);
    },30);
};

绘制圆
arc（x,y,半径,起始弧度，结束弧度，旋转方向）
x,y：起始位置
弧度与角度的关系：弧度=角度*Math.PI/180
旋转方向：顺时针（默认false）、逆时针（true）

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    oGC.moveTo(200,200);
    //弧度 = 角度*Math.PI/180
    //起始角度零度为三点钟的那条线，从3点开始画图
    oGC.arc(200,200,150,0,90*Math.PI/180,true);
    oGC.stroke();
};

这里写图片描述
实例4：
会动的表

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');

    function toDraw(){  
        var x = 200;
        var y = 200;
        var r = 150;    
        //必须清屏，去除时针分针秒针走过的痕迹
        oGC.clearRect(0,0,oC.width,oC.height);
        var oDate = new Date();
        var oHours = oDate.getHours();
        var oMin = oDate.getMinutes();
        var oSen = oDate.getSeconds();
        //因表针起始点在12点，圆绘图在3点起始，所以要逆时针转90度，将绘图起始点移到12点
        //时针每小时走过的弧度
        var oHoursValue = (-90 + oHours*30 + oMin/2) * Math.PI/180;
        var oMinValue = (-90 + oMin*6) * Math.PI/180;
        var oSenValue = (-90 + oSen*6) * Math.PI/180;

        oGC.beginPath();
        for(var i=0;i<60;i++){
            oGC.moveTo(x,y);
            oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
        }
        oGC.closePath();
        oGC.stroke();
        //绘制秒针刻度
        oGC.fillStyle = 'white';
        oGC.beginPath();
        oGC.moveTo(x,y);
        //绘制半径为19的白色的圆，将前面绘制的刻度遮盖住19px，漏出1px，
        oGC.arc(x,y,r*19/20,0,360*Math.PI/180,false);
        oGC.closePath();
        oGC.fill();

        //绘制时针刻度
        oGC.lineWidth = 3;
        oGC.beginPath();
        for(var i=0;i<12;i++){
            oGC.moveTo(x,y);
            oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
        }
        oGC.closePath();
        oGC.stroke();

        oGC.fillStyle = 'white';
        oGC.beginPath();
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*18/20,0,360*Math.PI/180,false);
        oGC.closePath();
        oGC.fill();

        //绘制时针
        oGC.lineWidth = 5;
        oGC.beginPath();
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
        oGC.closePath();
        oGC.stroke();
        //绘制分针
        oGC.lineWidth = 3;
        oGC.beginPath();
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);
        oGC.closePath();
        oGC.stroke();

        //绘制秒针
        oGC.lineWidth = 1;
        oGC.beginPath();
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);
        oGC.closePath();
        oGC.stroke();
    }
    setInterval(toDraw,1000);
    toDraw();
};

这里写图片描述
绘制其它曲线：
arcTo(x1,y1,x2,y2,r)
-第一组坐标、第二组坐标、半径
guadraticCurveTo(dx,dy,x1,y1)
-贝塞尔曲线：第一组控制点、第二组结束坐标
beizierCurveTo(dx1，dy1,dx2,dy2,x1,y1)
-贝塞尔曲线：第一组控制点、第二组控制点、第三组结束坐标

变化：
translate:
平移，将画布的坐标原点向左右方向移动x，向上下方向移动y.canvas的默认位置是在（0,0）
在位置 (10,10) 处绘制一个矩形，将新的 (0,0) 位置设置为 (70,70)。再次绘制新的矩形（请注意现在矩形从位置 (80,80) 开始绘制）：
rotate：参数为弧度
scale：缩放

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    oGC.translate(100,100);
    oGC.rotate(25*Math.PI/180);
    oGC.scale(0.5,0.5);
    oGC.fillRect(0,0,100,100);
};

这里写图片描述

juzipchy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas学习总结（1）

标签：绘制环境： getContext(“2d”）：目前支持2D的场景<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xht
复制链接

扫一扫