一．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绘制一些简单的案例；如果对您有所帮助的话，请点赞并关注哦，我会不定时的更新一下自己学习的经验以及见解，和大家进行交流。
您赞就是是我最大的动力！！！
网友评论