浅析HTML5的Canvas——2

作者: LiLi原上草 | 来源:发表于2017-06-03 18:17 被阅读47次

一.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绘制一些简单的案例;如果对您有所帮助的话,请点赞并关注哦,我会不定时的更新一下自己学习的经验以及见解,和大家进行交流。

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

相关文章

  • html5 Canvas画图5:曲线之arc

    本文属于《html5 Canvas画图系列教程》 在《html5 Canvas画图教程2:Canvas画线条 基础...

  • 浅析HTML5的Canvas——2

    一.Canvas的基本介绍 4.曲线绘制: canvas里画曲线的函数有4个!分别是arc,arcTo,quadr...

  • 常用问题总结

    2 html5新特性,html5为什么要写 (1)用于绘画的 canvas 元素(2)...

  • canvas基础

    html5 Canvas画图系列教程目录http://jo2.org/html5-canvas-tutorial-...

  • canvas笔记

    一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...

  • HTML5游戏技术

    canvas学习网址 html5 Canvas画图系列教程目录http://jo2.org/html5-canva...

  • canvas

    @(HTML5)[canvas与SVG] [TOC] 十 、canvas canvas的基本用法 canvas是H...

  • 初识canvas(画布)

    canvas(画布) 1、 HTML5提供的新元素2、 Canvas在HTML页面提供画布的功能,可以在页面中绘制...

  • bunny笔记|canvas常用的基础方法以及属性

    canvas 1.canvas是什么? 是HTML5提供的一种新标签(绘制图形图像的标签) 2.canvas可以做...

  • 浅析HTML5的Canvas——1

    一.Canvas的基本介绍 1.什么是Canvas 定义:是HTML5提供的一种新标签, ie9才开始支持的,Ca...

网友评论

    本文标题:浅析HTML5的Canvas——2

    本文链接:https://www.haomeiwen.com/subject/fgrmfxtx.html