关闭

canvas绘图基础整理

484人阅读 评论(0) 收藏 举报
分类:

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);


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:78899次
    • 积分:1685
    • 等级:
    • 排名:千里之外
    • 原创:86篇
    • 转载:46篇
    • 译文:0篇
    • 评论:7条