浅析HTML5的Canvas——2

一．Canvas的基本介绍

• 4．曲线绘制：

canvas里画曲线的函数有4个！分别是　arc,　arcTo,　quadraticCurveTo,　bezierCurveTo；

• arc的作用是画一个正规的圆弧，可以是一个完整的圆，也可以是一个圆的某一段弧线arc的语法如下：

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

参数说明：arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)；使用实例如下：

ctx.arc(400,400,20,0,Math.PI*2);
ctx.fill();
ctx.stroke();

渲染效果

ctx.arc(400,400,20,0,Math.PI*2/4,true);
ctx.fill();
ctx.stroke();

渲染效果

• quadraticCurveTo，绘制二阶贝塞尔曲线，参数如下：

ctx.moveTo(0, 500);    //指定起点的位置  
ctx.quadraticCurveTo(0, 0, 500, 500);  //指定控制点和终点位置    
ctx.stroke();

渲染效果

• ctx.bezierCurveTo，三阶贝塞尔：由一个起点一个终点，两个控制点组成，参数如下：

ctx.moveTo(0, 500);//指定起点的位置            
ctx.bezierCurveTo(0, 0, 500, 500, 500, 0);//指定控制点和终点位置
ctx.stroke();

渲染效果

• 5．基本图形绘制：

  4.1canvas画矩形：

  fillRect与strokeRect，fillRect可以直接填充出一个矩形，strokeRect就是直接描边一个矩形。他们的参数是一致的，依次是（起点x坐标,起点y,矩形的宽，矩形的高）。上一篇文章已经演示过，在这里就不重复了。

  4.1canvas画圆形：

canvas画圆弧的函数我们前面讲过了，即 arc我们用他来画一个圆形：

ctx.arc(300+25,100+20,20,0,Math.PI*2);
ctx.stroke()
ctx.fill();

• 5．Canvas绘制图片：

5.1 基本的绘制图片的方式
语法:

context.drawImage(img,x,y);

参数说明： x,y 绘制图片左上角的坐标，在画布上绘制的坐标点 img是绘制图片的dom对象
5.2 在画布上绘制图像,并规定图像的宽度和高度;
语法:

context.drawImage(img,x,y,width,height);

参数说明：width 绘制图片的宽度, height：绘制图片的高度
如果指定宽高，最好成比例，不然图片会被拉伸
等比公式： toH = Height * toW / Width;
设置的高度 = 原高度 * 设置的宽度 / 原宽度;
5.3 图片裁剪 ,并在画布上定位被裁剪的部分
语法:

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数说明：
sx,sy 裁剪的左上角坐标，
swidth：裁剪图片的高度。
sheight:裁剪的高度
其他同上
5.4 用JavaScript创建img对象

var img = new Image();//这个就是 img标签的dom对象
img.src = "imgs/arc.gif";
img.alt = "文本信息";
img.onload = function() {
//图片加载完成后，执行此方法

截取图片:

裁剪的位置: sx,sy,swidth,sheight : 50 50 120 120
sx,sy,swidth,sheight 相对于原图片的裁剪区域
放置位置:x,y,width,height : 350, 100, 120, 120
x, y ,width, height 相对于画布的显示区域
ctx.drawImage(img, 50, 50, 120, 120, 450, 100, 120, 120);

图片说明

<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    //2.绘制图片  方式一  标签绘制
    /*var img = document.getElementById('img');
    //注意:图片一定要在加载完成后再进行绘制
    //x,y 绘制图片左上角的坐标，在画布上绘制的坐标点 img是绘制图片的dom对象。
    img.onload = function (){
        ctx.drawImage(img,100,100);
    }*/
    //3.绘制图片 方式二 对象绘制
    /*var image = new Image();
    image.src = 'images/img_01.jpg';
    image.addEventListener('load',function(){
        ctx.drawImage(image,100,100);
    });*/
    //4.绘制图片  方式三 对象绘制   等比例
    /*var image = new Image();
    image.src = 'images/img_01.jpg';
    image.addEventListener('load',function (){
        //等比公式  w / h = 图片的宽/ 图片的高;
        var w = 200;
        var h = w * image.height / image.width;
        ctx.drawImage(image,w,h);
    });*/
    //5.图片截取
    //方法:context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    var image1 = new Image();
    image1.src = 'images/img_01.jpg';
    image1.addEventListener('load',function (){
        //img:截取图片
        //50,50,120,120  表示截取的x,y, 截取的宽和高
        //200,200,120,120  表示在画布上的x,y和宽高
        ctx.drawImage(image1,50,50,120,120,200,200,120,120);
    });
</script>

Canvas的基本介绍先介绍到这里，下一篇文章将使用canvas绘制一些简单的案例；如果对您有所帮助的话，请点赞并关注哦，我会不定时的更新一下自己学习的经验以及见解，和大家进行交流。

您赞就是是我最大的动力！！！