HTML5 Canvas 绘制图像

原创 2016年05月31日 11:28:10

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为控制前二( 三次贝塞尔)


版权声明:本文为博主原创文章,未经博主允许不得转载。详细代码(https://github.com/yana77)

相关文章推荐

利用HTML5的canvas标签实现灰太狼图像的绘制

Canvas绘制的灰太狼 - 当前浏览器不支持canvas var d = document.getElementById('demo'); function funLoad()...

怎样将html5中利用canvas绘制的图像在服务端保存为图片?

问题描述: 我通过html5的canvas绘制了一个图像,然后用toDataURL("image/jpeg")将生成的数据提交到服务器端。因为提交过来其实是data URI地址,而且该地址分为两部分...

html5 canvas 绘制图像、画布或视频

canvas绘制图形、画布或者视频 drawImage() 方法在画布上绘制图像、画布或视频。 drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。

使用HTML5中的canvas绘制灰太狼图像

大家好,我是byoneself,本次将为大家分享一下使用HTML5中的canvas绘制一个灰太狼图像,希望对大家有所帮助。

HTML5——Canvas画布绘制图像、绘制线型和绘制图片

canvas中创建路径,绘制线型,绘制图片

html5canvas操作图像

  • 2016-01-26 14:39
  • 829KB
  • 下载

HTML5 Canvas 图像动画的实现

PHP100 HTML5视频教程-canvas-吹气球效果 var canvas = document.getElementById('p...

HTML5 组件Canvas实现图像灰度化

HTML5发布已经有很长一段时间了,一直以来从来没有仔细的看过,过年刚来随便看看 发现HTML5中的Canvas组件功能是如此的强大,不怪很多牛人预言Flash已死,死不死 不是我要关心的,我...

【HTML5】Canvas图像

把一幅图像放置到画布上, 使用以下方法: drawImage(Img,x,y); 注:这里的Img必须是一个图像对象。显示一个canvas图像: picture.html ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)