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绘图基础

canvas绘图基础第一步 1.canvas绘图首先在html的body中添加如下标签 2.在script标签中编写相关js代码: 首先获取canvas的dom对象,然后获取上下文对象con...
  • u011344924
  • u011344924
  • 2015年08月28日 15:52
  • 193

canvas绘图基础(四)

canvas
  • weixin_37972723
  • weixin_37972723
  • 2017年11月24日 17:13
  • 38

Android 绘图基础Canvas

转载子:Android 2D Graphics学习一个Canvas对象有四大基本要素: 1、一个用来保存像素的Bitmap 2、一个Canvas在Bitmap上进行绘制操作 3、绘制的东西 4...
  • Mr_LiaBill
  • Mr_LiaBill
  • 2016年01月19日 14:47
  • 492

canvas绘图基础(五)

canvas
  • weixin_37972723
  • weixin_37972723
  • 2017年11月24日 18:02
  • 51

canvas绘图基础(一)

canvas绘图基础
  • weixin_37972723
  • weixin_37972723
  • 2017年11月24日 12:58
  • 47

canvas绘图基础(二)

canvas
  • weixin_37972723
  • weixin_37972723
  • 2017年11月24日 14:30
  • 43

canvas绘图基础(三)

canvas绘图基础
  • weixin_37972723
  • weixin_37972723
  • 2017年11月24日 15:04
  • 86

canvas标签绘图基础

注:canvas是根据状态进行绘制的 1.设置长宽   canvas作为标签,可以通过style设置样式,设置其长宽通常在style外直接使用width和height进行设置;也可以通过js进...
  • u014451076
  • u014451076
  • 2016年02月02日 16:41
  • 236

浅谈android——Canvas绘图基础详解

Canvas绘图有三个基本要素:Canvas、绘图坐标系以及Paint。Canvas是画布,我们通过Canvas的各种drawXXX方法将图形绘制到Canvas上面,在drawXXX方法中我们需要传入...
  • adminlxb89
  • adminlxb89
  • 2017年03月07日 13:53
  • 100

HTML5 Canvas初体验之绘图基础

相信到目前你应该已经对Canvas这一神奇的HTML5新元素有了一定的了解。在本文中,我们将深入了解画布的功能及特点,学习如何在HTML中利用Canvas绘制图形以及其它类型对象。理解如何改变图形形状...
  • wudiisss
  • wudiisss
  • 2012年10月10日 11:21
  • 1629
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:canvas绘图基础整理
举报原因:
原因补充:

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