HTML5 Canvas 绘制图像

来源：互联网发布：js手机购物车代码编辑：程序博客网时间：2024/06/10 01:23

Canvas vs. SVG

Canvas

canvas通过JavaScript来绘制2D图像、逐像素进行渲染。如果位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图像覆盖的对象
依赖分辨率
不支持时间处理器
能够以.png或.jpg格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

SVG是一种使用XML描述2D图像的语言
SVG基于XML，意味着SVG DOM中的每个元素都是可用的。可以为某个元素附加JavaScript事假处理器
每个被绘制图像均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度
不适合游戏应用

（以上资料参考W3School）

绘制矩形

fillRect(x,y,width,height) 绘制一个填充的矩形

strokeRect(x,y,width,height) 绘制一个矩形的边框

clearRect(x,y,width,height)清楚指定矩形区域，让清楚部分完全透明

            ctx = myRect.getContext('2d');            ctx.fillStyle="#00CCFF";            ctx.strokeStyle = "#fff";            ctx.lineWidth=5;            ctx.fillRect(10,10,200,150);            ctx.strokeRect(30,30,150,110);            ctx.clearRect(50,50,10,10);            ctx.clearRect(150,50,10,10);            ctx.clearRect(50,110,10,10);            ctx.clearRect(150,110,10,10);

绘制路径

beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径

closePath() 闭合路径之后图形绘制命令又重新指向到上下文中

stroke() 通过线条来绘制图形轮廓
fill() 通过填充路径的内容区域生成实心的图形

*第一条构造命令通常是moveTo()，无论最后是什么

一个简单的人物（有点丑）

                ctx.fillStyle="#00FFCC";                ctx.beginPath();                ctx.arc(80,90,55,20,Math.PI*2,true);                ctx.moveTo(45,100);                ctx.arc(80,100,35,0,Math.PI,false);                ctx.moveTo(70,80)                ctx.arc(60,80,10,0,Math.PI*2,true);                ctx.moveTo(110,80);                ctx.arc(100,80,10,0,Math.PI*2,true);                ctx.fillRect(45,145,80,100);                ctx.moveTo(45,145);                ctx.lineTo(10,200);                ctx.moveTo(125,145);                ctx.lineTo(155,200);                ctx.moveTo(80,244);                ctx.lineTo(70,330);                ctx.moveTo(90,244);                ctx.lineTo(110,320);                ctx.stroke();

一个简单的奥运五环

            cxt = myCanvas.getContext('2d');            cxt.strokeStyle ="#00CCFF";            cxt.lineWidth = 5;            cxt.beginPath();            cxt.arc(80,100,60,60,Math.PI*2,true);            cxt.stroke();            cxt.strokeStyle = "#FFD700";            cxt.lineWidth = 5;            cxt.beginPath();            cxt.arc(155,180,60,60,Math.PI*2,true);            cxt.stroke();            cxt.strokeStyle = "black";            cxt.lineWidth = 5;            cxt.beginPath();            cxt.arc(230,100,60,60,Math.PI*2,true);            cxt.stroke();            cxt.strokeStyle = "green";            cxt.lineWidth = 5;            cxt.beginPath();            cxt.arc(305,180,60,60,Math.PI*2,true);            cxt.stroke();            cxt.strokeStyle = "red";            cxt.lineWidth = 5;            cxt.beginPath();            cxt.arc(380,100,60,60,Math.PI*2,true);            cxt.stroke();

两个三角形

使用填充（filled），路径自动闭合，使用描边（stroked）则不会闭合路径。如果没有添加闭合路径closePath()到描述的三角形函数中，则只会绘制两条线段，并不是一个完整的三角形。

//填充三角形            ctx.fillStyle="#00FFCC";            ctx.beginPath();            ctx.moveTo(50,50);            ctx.lineTo(100,100);            ctx.lineTo(50,100);            ctx.fill();//描边三角形            ctx.strokeStyle="green";            ctx.beginPath();            ctx.moveTo(120,50);            ctx.lineTo(180,100);            ctx.lineTo(120,180);            ctx.closePath();            ctx.stroke();

圆弧

arc(x,y,radius,startAngle,endAngle,anticlockwise)

radius =(Math.PI/180)*degrees.

function myRadius(){            for(var  i=0;i<7;i++){                for(var j=0;j<7;j++){                    ctx.fillStyle="wheat";                    ctx.strokeStyle="OliveDrab";                    ctx.beginPath();                    var x = 20 + 35*i ;                    var y = 20 + 35*j ;                    var radius = 15;                    var startAngle = 0 ;                    var endAngle = Math.PI*2;                    ctx.arc(x,y,radius,startAngle,endAngle);                    if(i%2 ==0){                        ctx.fill();                    }else{                        ctx.stroke();                    }                }            }        }        function myAngle(){            for(var i=0; i<5; i++){                for(var j=0; j<5; j++){                    ctx.fillStyle="Crimson";                    ctx.strokeStyle="PaleVioletRed";                    ctx.beginPath();                    var x = 400 + 80*i;                    var y = 200 + 80*j;                    var radius = 40;                    var startAngle =0;                    var endAngle = Math.PI + (Math.PI*j)/2;                    var anticlockwise = i%2==0?false:true;                    ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise);                    if(j%2==0){                        ctx.stroke();                    }else{                        ctx.fill();                    }                }            }        }

 function draw(id){            var myCanvas = document.getElementById(id);            if(myCanvas==null){                return false;            }            var ctx = myCanvas.getContext('2d');            ctx.fillStyle="#F0F8FF";            ctx.fillRect(0,0,700,800);            for(var i = 0 ; i <=10; i++){                ctx.beginPath();                ctx.arc(350,i*25,i*10,0,Math.PI*2,true);                ctx.fillStyle="rgba(178,34,34,0.5)";                ctx.closePath();                ctx.fill();            }        }

lineTo

cxt.fillStyle = "#AFEEEE";            cxt.fillRect(0,0,300,400);            var xx = 150;            var yy = 200;            var s =100;            cxt.beginPath();            cxt.fillStyle="#DDA0DD";            cxt.strokeStyle="#EEE8AA";            var dig = Math.PI/15*13;            for( var i=0; i <30; i++){                var x = Math.sin(i*dig);                var y = Math.cos(i*dig);                cxt.lineTo(xx+x*s,yy+y*s);            }            cxt.closePath();            cxt.fill();            cxt.stroke();

贝塞尔(bezier)以及二次贝塞尔

quadraticCurveTo(cp1x,cp1y,x,y); x,y为结束点,cp1x,cp1y为控制点（二次贝塞尔）

quadraticCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) x,y为结束点，cp1x,cp1y为控制点一，cp2x,cp2y为控制前二（三次贝塞尔）

0 0