Canvas学习总结（1）

来源：互联网发布：算法的有穷性是指编辑：程序博客网时间：2024/06/07 18:15

标签：

绘制环境：
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);};

这里写图片描述

0 0