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


Android中Canvas绘图基础详解

  • 2015年11月11日 00:34
  • 6.25MB
  • 下载

绘图基础Canvas+Paint

  • 2016年11月17日 17:23
  • 26.06MB
  • 下载

Android中Canvas绘图基础详解(附源码下载)

Android中,如果我们想绘制复杂的自定义View或游戏,我们就需要熟悉绘图API。Android通过Canvas类暴露了很多drawXXX方法,我们可以通过这些方法绘制各种各样的图形。Canvas...

绘图基础Canvas+Path+Paint

  • 2016年11月18日 13:40
  • 26.37MB
  • 下载

(17)HTML5-Canvas画布基础绘图

在HTML中须用一组与标签定义画布的范围,与其它标签一样,元素可以设置id,width,height,bgcolor等属性,在没有特别设置的情况下,画布宽的默认值为300pixels,高的默认值为15...

Android 绘图基础:Canvas,Paint,RectF,Paint类

一、Canvas类(android.graphics.Canvas) Canvas类好比手机中的画纸,我们可以在Canvas上画图形或者图像。一般我们用android来绘画的时候,需要四个组成部分...

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

学习导航本章讲解: 自定义视图,我们需要做哪些准备!对于一些中级的开发者来说就要接触到自定义视图,由于Android自带的视图无法满足自己需求,又或者美观度不够自己的要求,我们就要自来亲自设计自己的视...

Android自定义控件:绘图基础Canvas、Paint类

概述:    Android的绘图应该继承View组件,并重写它的onDraw(Canvas canvas)类,这里的Canvas类就是一个“依附”于指定View的画布;有画布,相对也有一个画笔Pai...

Android中Canvas绘图基础详解(附源码下载)

原文出处:http://blog.csdn.net/iispring/article/details/49770651  Android中,如果我们想绘制复杂的自定义View或游戏,我们就需要熟悉...

Android中Canvas绘图基础详解(附源码下载)

Android中,如果我们想绘制复杂的自定义View或游戏,我们就需要熟悉绘图API。Android通过Canvas类暴露了很多drawXXX方法,我们可以通过这些方法绘制各种各样的图形。Canvas...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:canvas绘图基础整理
举报原因:
原因补充:

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