canvas绘图基础整理

原创 2015年07月11日 09:14:43

Canvas学习

一、熟悉一下:

window.onload=function(){

        var a=document.getElementById("can");

        //检测a.getContext()

        //alert(a.getContext);

        if(a.getContext){

            var ctx= a.getContext('2d');

            //画布尺寸

            ctx.width=400;

            ctx.height=400;

 

            //画笔样式

            ctx.lineWidth=4;

            ctx.strokeStyle="blue";

            //填充样式

            ctx.fillStyle='pink';

 

            //绘画路径

            ctx.beginPath();

            ctx.moveTo(0,0);

            ctx.lineTo(100,100);

            //填充路径

            ctx.fillRect(0,0,100,100);

 

            ctx.stroke();

            ctx.fill();

        }

}

其他属性:Linecap

window.onload=function(){

        var a=document.getElementById("can");

        //检测a.getContext()

        //alert(a.getContext);

        if(a.getContext){

            var ctx= a.getContext('2d');

            //画布尺寸

            ctx.width=400;

            ctx.height=400;

 

            //画笔样式

            ctx.lineWidth=20;

            ctx.strokeStyle="blue";

 

            //划横线函数,长度为100

            function line() {

                ctx.strokeStyle=arguments[2];

                ctx.lineCap=arguments[1];

                ctx.beginPath();

                ctx.moveTo(50,arguments[0]);

                ctx.lineTo(240,arguments[0]);

                ctx.stroke();

            }

            line(30,'butt','red');//直角

            line(60,'round','black');//圆角

            line(90,'square','purple');//直角

        }

    }

 

 

二、画矩形strokeRect

//画矩形

            function rect(x,y){

                ctx.beginPath();

                ctx.strokeRect(x,y,100,100);//四个参数,x,y,width,height

                ctx.stroke();

            }

            !function () {

                var i=0;

                for(;i<10;i++){

                    rect(3*16*i,5*2);

                }

            }();

 

三、画圆arc(x,y,radius(半径),start,end,是否逆时针)

window.onload=function(){

        var a=document.getElementById("can");

        //检测a.getContext()

        //alert(a.getContext);

        if(a.getContext){

            var ctx= a.getContext('2d');

 

            //画笔样式

            ctx.lineWidth=4;

            ctx.strokeStyle="blue";

 

            //画圆,六个参数(x,y,radius(半径),start,end,是否逆时针)

            function arc(){

                ctx.beginPath();

                ctx.strokeStyle='red';

                ctx.arc(arguments[0],arguments[1],arguments[2],0,90*Math.PI/180,arguments[3]);

                ctx.stroke();

            };

            setTimeout(function(){

                ctx.clearRect(0,0,400,400);

                (function (){

                    for(var i=0;i<10;i++){

                        var a=Math.random()*200;

                        var b=Math.random()*200;

                        var c=Math.abs(Math.random()*40);

                        var d=Math.floor(Math.random()*2);

                        console.log(d);

                        arc(a,b,c,d);

                    }

                })();

                setTimeout(arguments.callee,100);

            },100)

        }

}

 

 

四、画圆角矩形

五、清除画板clearRect(x,y,width,height)

            //清除画板

            ctx.arc(100,100,50,0,360*Math.PI/180,true);

            ctx.fillStyle='pink';

            ctx.fill();

            ctx.clearRect(100,100,20,20);

 

六、贝塞尔曲线

//二次贝尔曲线

            ctx.beginPath();

            ctx.moveTo(20,20);

            ctx.quadraticCurveTo(100,0,200,200);

            ctx.stroke();

 

            //三次贝尔曲线

            ctx.beginPath();

            ctx.moveTo(68,30);

            ctx.bezierCurveTo(20,10,200,200,200,100);

            ctx.stroke();

 

七、其他

剪切Cilp()

    //clip()

            ctx.arc(100,100,50,0,360*Math.PI/180,true);

            ctx.clip();//使用前后的效果对比

 

            ctx.moveTo(100,100);

            ctx.lineTo(300,300);

 

            ctx.strokeStyle='red';

            ctx.stroke();

 

 

八、绘制文字

//绘制文本fillText strokeText方法 都是四个参数(文本内容,x,y,maxWidth);

            //fillText()方法,需要fillstyle改变样式

            var arr=['red','green','purple','black','yellow','#39f'];

            function draw(){

                ctx.beginPath();

                console.log(arguments[2]);

                ctx.fillStyle=arguments[2];

                ctx.clearRect(0,0,400,400);

                ctx.fillText("我爱三妹",arguments[0],arguments[1]);

            }

            (function(){

                setTimeout(function(){

                    var a=Math.floor(Math.random()*6);

                    //console.log(arr[a]);

                    draw(Math.random()*300,Math.random()*200,arr[a]);

                    setTimeout(arguments.callee,300);

                },300);

            })();

 

            //strokeText()方法,用strokeStyle改变样式

            ctx.beginPath();

            ctx.strokeText("我更爱三妹",100,100);

 

 

文字的其他样式设置:

//文字的一些设置

            ctx.fontWeight='600';//文字粗细

            ctx.font="30px";//文字大小

            ctx.font='30px Arial';//文字字体;

            ctx.font='bold 30px Arial';//文字粗体;

            ctx.font='italic bold 30px Arial';//文字斜体;


 

文字对齐方式:

//文本对齐方式两种textAlign()textBaseline()

            ctx.textAlign='right';

            ctx.textBaseline='bottom';

 

九、图片操作 drawImage() 与 putImageData()

//图片绘制drawImage()方法

            ctx.drawImage(img,x,y);//在哪画,尺寸与原图尺寸一样

            ctx.drawImage(img,dx,dy,dw,dh);//dw dh是相对dx dy的偏移量。缩放到哪

            ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);//剪切一块到哪,从哪到哪,在哪画多大的图

 

            //获取图片资源的两种方法

 

            //第一种 用标签的方式

            var img=document.getElementById("img");

            ctx.drawImage(img,200,200,100,100);

 

            //第二种 用创建Image对象的方法

            (function(){

                var img=new Image();

                img.src='face.jpg';

                ctx.drawImage(img,100,100,200,200);

            })()

 

//图片绘制getImageData()方法七个参数(图,在哪画,找图起始位置,尺寸)

//putImageData()方法

            ctx.drawImage(img,200,200,100,100);

            //获取像素数据

            var img=ctx.getImageData(0,0,200,200);//获取这一区域内的像素信息

            //将取得的数据画到画布上

            ctx.putImageData(img,100,100,30,30,100,100);


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

绘图基础Canvas+Paint

  • 2017-02-06 15:51
  • 26.06MB
  • 下载

Android中Canvas绘图基础详解

  • 2015-11-11 00:34
  • 6.25MB
  • 下载

canvas学习之路(一)基础绘图功能解析

canvas的一些基础画图功能还是比较容易懂的,只是有些功能初次接触的话比较难以理解,需要自己仔细琢磨。我把这些功能以及自己学习过程遇到的问题写下来希望能帮到大家。(一)canvas介绍canvas是...

绘图基础Canvas+Path+Paint

  • 2017-02-06 15:43
  • 26.37MB
  • 下载

绘图基础Canvas+Paint

  • 2016-11-17 17:23
  • 26.06MB
  • 下载

Android绘图基础Paint和Canvas介绍-android学习之旅(六十一)

canvas介绍 Paint类介绍代码示例 效果图

绘图基础Canvas+Path+Paint

  • 2016-11-18 13:40
  • 26.37MB
  • 下载

自定义view—绘图基础Canvas+Paint

绘图基础我们开发自定义view的时候,就要绘制自己心仪的图形,这个时候我们就要能够熟练的运用我们的绘图知识,这里我们看一下如何实现一、绘图都需要那些相关知识1、我们平常画画一样,我们需要一张画布(Ca...

Canvas基础4-绘图的简单变形

今天复习3个知识点: 平移  translate(x,y);    x,y是移动原点的坐标值,原点最初的默认值是(0,0)缩放  scale(a,b);        a,b是缩放的倍数,不...

HTML5 Canvas初体验之绘图基础

相信到目前你应该已经对Canvas这一神奇的HTML5新元素有了一定的了解。在本文中,我们将深入了解画布的功能及特点,学习如何在HTML中利用Canvas绘制图形以及其它类型对象。理解如何改变图形形状...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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