HTML--Canvas基础入门

一 HTML5画布基本介绍

1.HTML5专门为画布功能提供的标签:<canvas>,所以画布相关的功能都是基于这个标签来完成的;

1 <canvas id="canvas" width="550" height="300"></canvas>
2 // 直接在canvas中设置width和height属性和将width和height添加到CSS文件中,有一定的区别:
3 // 1.使用属性来定义canvas,不仅定义canvas对象的宽高,同时也定义了可绘制图形区的宽高;
4 // 2.而使用CSS的方法只能定义canvas本身的大小,不能定义图形绘制区;

2.为了能够调用HTML5的画布API,我们需要访问画布的相关上下文(Context);

1 var canvas = document.getElementById(‘canvas‘),
2     context = canvas.getContext(‘2d‘);
3 // 使用context可以调用更多的方法来绘制;

二 使用HTML5画布绘制直线

1.beginPath():开始绘制准备;

2.moveTo():绘制的起始坐标(x,y);

3.lineTo():绘制的结束坐标(x,y);

4.stroke():立刻开始绘制直线;

1 var canvas = document.getElementById(‘Canvas‘),
2     context  = canvas.getContext(‘2d‘);
3 context.beginPath();
4 context.moveTo(150, 100);
5 context.lineTo(300, 200);
6 context.stroke();

三 设置直线的粗细

1 context.lineWidth = 20;      // 设置直线的宽度为20px;
2 // 须在调用stroke()方法前设置这个属性;否则此属性无效;

四 设置绘制直线的颜色

1 context.strokeStyle = ‘#dd4814‘;     // 设置直线颜色;
2 // 须在调用stroke()方法前设置这个属性;否则此属性无效;

五 设置直线两端的样式

1.context.lineCap = ‘butt‘;          // 绘制按钮类型;

2.context.lineCap = ‘round‘;        // 绘制圆角类型;

3.context.lineCap = ‘square‘;       // 绘制正方形类型;

六 绘制弧形

// HTML5画布使用arc()方法来绘制相关的弧形;

1 arc(
2     x,                  // 定义圆心x坐标;
3     y,                  // 定义圆心y坐标;
4     radius,             // 半径;
5     startAngle,         // 起始角度;
6     endAngle,           // 结束角度;
7     counterClockWise,   // 是否是逆时针方向;
8     )
1 var x = 200, y = 150, radius = 60, startAngle = 0.5*Math.PI, endAngle = 1.5*Math.PI, counterClockWise = false;
2 context.beginPath();
3 context.arc(x, y, radius, startAngle, endAngle, counterClockWise);
4 context.strokeStyle = ‘black‘;
5 context.lineWidth = 15;
6 context.stroke();

七 生成二次曲线

// 二次曲线通过控制两根虚拟的直线来生成对应的图形;

context.beginPath();
context.moveTo(100, 200);
context.quadraticCurveTo(150, 50, 200, 200);
context.lineWidth = 20;
context.strokeStyle = ‘#dd4814‘;
context.stroke();

八 生成贝塞尔曲线

// 相对于二次曲线来说,贝塞尔曲线增加了一个控制点来生成更复杂的曲线样式;

1 context.beginPath();
2 context.moveTo(188, 130);
3 context.bezierCurveTo(140, 10, 388, 10, 388, 170);
4 context.lineWidth = 20;
5 context.strokeStyle = ‘#dd4814‘;
6 context.stroke();

九 HTML5路径

// 使用HTML5的路径(path),可以连接多个子路经;

// 上一个路径的结束点即成为下一个路径的起始点;

1.lineTo();

2.arcTo();

3.quadraticCruveTo();   // 向下弯曲;

4.bezierCurveTo();       // 先向上弯曲,再向下弯曲;

1 context.beginPath();
2 context.moveTo(100, 20);
3 context.lineTo(200, 160);
4 context.quadraticCurveTo(230, 200, 250, 120);
5 context.bezierCurveTo(290, -40, 300, 200, 400, 150);
6 context.lineTo(500, 90);
7 context.lineWidth = 15;
8 context.strokeStyle = ‘#dd4814‘;
9 context.stroke();

十 设置直线的连接样式

// 在HTML5画布中直线的连接样式(linejoin)可以有不同类型;

1.miter:直角连接;

2.round:圆角连接;

3.bevel:去角连接;

1 context.beginPath();
2 context.moveTo(99, 150);
3 context.lineTo(149, 50);
4 context.lineTo(199, 150);
5 context.lineJoin = ‘miter‘;
6 context.stroke();

十一 arcTo生成矩形圆角效果

// HTML5画布中我们可以使用arcTo方法来生成矩形圆角效果;

 1 var rectWidth = 200;
 2 var rectHeight = 100;
 3 var rectX = 189, rectY = 100;
 4 var cornerRadius = 50;
 5 context.beginPath();
 6 context.moveTo(rectX, rectY);
 7 context.lineTo(rectX + rectWidth - cornerRadius, rectY);
 8 context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
 9 context.lineTo(rectX + rectWidth, rectY + cornerRadius + rectHeight);
10 context.lineWidth = 15;
11 context.stroke();

十二 画布生成闭合的图形

// 在HTML5画布中,我们使用beginPath方法开始路径设置,同时使用closePath方法来闭合路径;

 1 context.beginPath();
 2 context.moveTo(170, 80);
 3 context.bezierCurveTo(130, 100, 130, 150, 230, 150);
 4 context.bezierCurveTo(250, 180, 320, 180, 340, 150);
 5 context.bezierCurveTo(420, 150, 420, 120, 390, 100);
 6 context.bezierCurveTo(430, 40, 370, 30, 340, 50);
 7 context.bezierCurveTo(320, 5, 250, 20, 250, 50);
 8 context.bezierCurveTo(200, 5, 150, 20, 170, 80);
 9 context.closePath();
10 context.lineWidth = 15;
11 context.lineJoin = ‘round‘;
12 context.strokeStyle = ‘#dd4814‘;
13 context.stroke();

十三 使用HTML5画布生成正方形或者矩形

// rect(x, y, w, h);

// x,y代表矩形的左上角坐标;w是指矩形的宽度;h是指矩形的长度;

context.beginPath();
context.rect(100, 50, 200, 200);    // 绘制宽高;
context.fillStyle = ‘#dd4814‘;      // 设置填充颜色;
context.fill();                     // 绘制结束;

十四 绘制圆形

// 在HTML5画布中,如果需要生成一个原型,可以通过调用arc()方法来实现;

// 只需要设置起始角度为0,终止角度是2*Math.PI;

 1 var centerX = canvas.width/2,
 2     centerY = canvas.height/2,
 3     radius = 80;
 4 context.beginPath();
 5 context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
 6 context.fillStyle = ‘#dd4814‘;      // 内填充颜色;
 7 context.fill();                     // 设置内填充;
 8
 9 context.lineWidth = 12;             // 描边宽度;
10 context.strokeStyle = ‘orange‘;     // 描边颜色;
11 context.stroke();                   // 设置描边;
12 // 若同时使用了fill()和stroke(),务必保证fill()在stroke()之前调用,否则stroke()绘制的线会被fill()遮住一半;

十五 HTML5画布生成线性渐变效果

1.createLinearGradient(x0, y0, x1, y1);

// x0,y0代表了渐变开始点坐标;x1,y1代表了结束点坐标;

2.addColorStop(stop, color);

// 设置渐变方向后,可以使用addColorStop来设置渐变的颜色;

// stop介于0~1之间的值,表示渐变中开始与结束之间的位置;color代表颜色值;

1 context.rect(0, 0, canvas.width, canvas.height);
2 var gridi = context.createLinearGradient(0, 0, canvas.width, canvas.height);
3 gridi.addColorStop(0, ‘orange‘);
4 gridi.addColorStop(1, ‘#dd4814‘);
5 context.fillStyle = gridi;
6 context.fill();

十六 HTML5画布绘制径向渐变;

var gridi = context.createRadialGradient(275, 150, 50, 275, 150, 200);

// 起始点X坐标, 起始点Y坐标, 起始点半径, 渐变结束点X坐标, 渐变结束点Y坐标, 结束点半径;

1 gridi.addColorStop(0, ‘#dd4814‘);
2 gridi.addColorStop(1, ‘#ffff66‘);
3 context.fillStyle = gridi;
4 context.fillRect(0, 0, 550, 300);

十七 HTML5画布中添加背景图案

createPattern(image, repetition);

// image:对应的图片对象;

// repetition:图片的重复属性;默认值是repeat;

 1 var image = new Image();
 2 image.onload = function () {
 3     // 这里确保图片加载后再执行HTML5画布相关的方法;
 4     var pattern = context.createPattern(image, ‘repeat‘);
 5     context.rect(0, 0, 550, 300);
 6     context.fillStyle = pattern;
 7     context.fill();
 8 }
 9 // 设置背景图案的地址:
10 image.src = ‘http://www.gbtags.com/gb/networks/uploadimg/d72f284c-c729-4de7-ba3e-b93587cb1446.jpg‘;

十八 HTML5画布绘图

// 使用drawImage()方法来绘制图形;

1 var image = new Image();
2 image.onload = function(){
3     context.drawImage(image, 100, 50, 200, 125);
4     // 绘制图片image,第二和第三个参数表示图片距离canvas左上角的left和top距离;
5     // 第四和第五个参数表示绘制图片的宽度和高度;
6 }
7 image.src = ‘http://www.gbtags.com/gb/networks/uploadimg/d72f284c-c729-4de7-ba3e-b93587cb1446.jpg‘;

十九 画布实现图片裁剪

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

// sx:相对于图片自身裁剪的左边距离;

// sy:相对于图片自身裁剪的顶端距离;

// sw:裁剪的图片宽度;

// sh:裁剪的图片高度;

// dx:图片裁剪后相对于画布左端距离;

// dy:图片裁剪后相对于画布顶端距离;

// dw:图片裁剪后设置宽度;

// dy:图片裁剪后设置高度;

1 var image = new Image();
2 image.onload = function(){
3     context.drawImage(image, 100, 50, 100, 84, 50, 50, 100, 84);
4 };
5 image.src = ‘http://www.gbtags.com/gb/networks/uploadimg/d72f284c-c729-4de7-ba3e-b93587cb1446.jpg‘;

二十 HTML画布添加文字

// 使用fillStyle属性来设置字体颜色;

context.fillStyle = ‘#dd4814‘;  // 注意:在fillText()之前设置fillStyle的值;

// 使用相关属性,可以定义文字属性,

context.font = ‘bold 30pt "microsoft yahei"‘;

// 使用fillText()方法添加相关文字;

context.fillText(text, x, y);

1 context.font = ‘bold 30pt "microsoft yahei"‘;
2 context.fillStyle = ‘#dd4814‘;
3 context.fillText(‘Hello World!‘, 150, 160);

二十一 HTML画布添加描边文字

// 使用strokeText()方法可以添加描边文字类型;

// 并且可以使用strokeStyle()来设置描边颜色;

1 context.font = ‘bold 30pt "microsoft yahei"‘;
2 context.fillStyle = ‘#ff6‘;
3 context.fillText(‘Hello World!‘, 150, 160);
4 context.strokeStyle = ‘#dd4814‘;
5 context.lineWidth = 2;
6 context.strokeText(‘Hello World!‘, 150, 160);
7 // 如果需要同时使用fillText()和strokeText()方法,务必先调用fillText()方法;

二十二 HTML画布文字对齐

// 在HTML5画布中,我们使用textAlign属性来定义文字的对齐;

1.center-居中;

2.left-居左;

3.right-居右;

4.start-文字方向从左到右;

5.end-文字方向从右到左;

1 context.font = ‘bold 30pt "microsoft yahei"‘;
2 context.textAlign = ‘right‘;
3 context.fillText(‘Hello World!‘, 275, 150);
4 // 基于坐标点(275, 150)的右对齐;

二十四 HTML5画布获取文字度量

// 在HTML5画布中,我们可以使用measureText方法来获取文字的相关度量信息对象;

// 其中包含一个属性,即文字宽度;基于文字的大小和字体,它可以提供一个准确的文字宽度;

 1 var x = canvas.width/2,
 2     y = canvas.height/2 - 10;
 3 var text = ‘Hello HTML5‘;
 4
 5 context.font = ‘bold 30pt "microsoft yahei"‘;
 6 context.textAlign = "center";
 7 context.fillStyle = ‘red‘;
 8 context.fillText(text, x, y);
 9
10 // 以下代码获取上面定义的text的相关metrics信息;
11 var metrics = context.measureText(text);
12 var width = metrics.width;
13 context.font = ‘15pt Arial‘;
14 context.textAlign = ‘center‘;
15 context.fillStyle = ‘#888‘;
16 context.fillText(‘- ‘ + width + ‘px -‘, x, y+45);

推荐网站:极客标签

时间: 2024-10-09 09:17:19

HTML--Canvas基础入门的相关文章

canvas基础入门(一)绘制线条、三角形、七巧板

复杂的内容都是有简单的线条结合而成的,想要绘制出复杂好看的内容先从画直线开始 canvas绘制直线先认识几个函数 beginPath():开始一条路径,或重置当前的路径 moveTo(x,y):用于规定直线的起点坐标 lineTo(x,y):用于规定直线的终点坐标 closePath():方法创建从当前点到开始点的路径 stroke():方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径.默认颜色是黑色 利用上面的函数就可以简单的画出直线了 代码 <canvas id

Android基础入门教程——8.3.16 Canvas API详解(Part 1)

Android基础入门教程--8.3.16 Canvas API详解(Part 1) 标签(空格分隔): Android基础入门教程 本节引言: 前面我们花了13小节详细地讲解了Android中Paint类大部分常用的API,本节开始我们来讲解 Canvas(画板)的一些常用API,我们在Android基础入门教程--8.3.1 三个绘图工具类详解 中已经列出了我们可供调用的一些方法,我们分下类: drawXxx方法族:以一定的坐标值在当前画图区域画图,另外图层会叠加, 即后面绘画的图层会覆盖前

Android基础入门教程——8.3.18 Canvas API详解(Part 3)Matrix和drawBitmapMash

Android基础入门教程--8.3.18 Canvas API详解(Part 3)Matrix和drawBitmapMash 标签(空格分隔): Android基础入门教程 本节引言: 在Canvas的API文档中,我们看到这样一个方法:drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint) 这个Matrix可是有大文章的,前面我们在学Paint的API中的ColorFilter中曾讲过ColorMatrix 颜色矩阵,一个4 * 5 的矩阵

canvas的基础入门

canvas是定义在浏览器上的画布.它不仅仅是一个标签元素更是一个编程工具是一套编程的接口.利用它可以开发出很多东西,比如动画,游戏,动态的图表等富有变现力和感染力的应用.还可以开发出绚丽的3D动态效果.接下来我们一起学习! 一. 创建canvas 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta na

从零基础入门JavaScript(1)

从零基础入门JavaScript(1) 1.1  Javascript的简史 1995年的时候   由网景公司开发的,当时的名字叫livescript    为了推广自己的livescript,搭了java顺风车,改名为javascript 与此同时,     微软因此在自身的浏览器里,也推出了自己的脚本语言 jscript 1997年时候,  由ECMA(欧洲计算机制造商协会)出面,推出了一套javascript的规范,Ecmascript ,规范提出js由三部分组成 JS的组成: ECMAS

2015年最新Android基础入门教程目录(完结版)

2015年最新Android基础入门教程目录(完结版) 标签(空格分隔): Android基础入门教程 前言: 关于<2015年最新Android基础入门教程目录>终于在今天落下了帷幕,全套教程 共148节已编写完毕,附上目录,关于教程的由来,笔者的情况和自学心得,资源分享 以及一些疑问等可戳:<2015最新Android基础入门教程>完结散花~ 下面是本系列教程的完整目录: 第一章:环境搭建与开发相关(已完结 10/10) Android基础入门教程--1.1 背景相关与系统架构

Android基础入门教程——8.3.4 Paint API之—— Xfermode与PorterDuff详解(一)

Android基础入门教程--8.3.4 Paint API之-- Xfermode与PorterDuff详解(一) 标签(空格分隔): Android基础入门教程 本节引言: 不知道标题这两个玩意你熟不熟悉啦,如果自己实现过圆角或者圆形图片,相信对这两个名词 并不模式,一时半伙没想起来?没关系,下面这个图你可曾见过? PS:网上都说在:\samples\android-XX\legacy\ApiDemos\src\com\example\android\apis\graphics 下能找到这个

Android基础入门教程——8.3.2 绘图类实战示例

Android基础入门教程--8.3.2 绘图类实战示例 标签(空格分隔): Android基础入门教程 本节引言: 前两节我们学了Bitmap和一些基本的绘图API的属性以及常用的方法,但心里总觉得有点 不踏实,总得写点什么加深下映像是吧,嗯,本节我们就来写两个简单的例子: 1.简单画图板的实现 2.帮美女擦衣服的简单实现 嘿嘿,第二个例子是小猪刚学安卓写的一个小Demo~嘿嘿~ 开始本节内容~ 1.实战示例1:简单画图板的实现: 这个相信大家都不陌生,很多手机都会自带一个给用户涂鸦的画图板,

Android基础入门教程——8.1.1 Android中的13种Drawable小结 Part 1

Android基础入门教程--8.1.1 Android中的13种Drawable小结 Part 1 标签(空格分隔): Android基础入门教程 本节引言: 从本节开始我们来学习Android中绘图与动画中的一些基础知识,为我们进阶部分的自定义 打下基础!而第一节我们来扣下Android中的Drawable!Android中给我们提供了多达13种的 Drawable,本节我们就来一个个撸一遍! Drawable资源使用注意事项 Drawable分为两种: 一种是我们普通的图片资源,在Andr

osgEarth基础入门(转载)

osgEarth基础入门 osgEarth是基于三维引擎osg开发的三维数字地球引擎库,在osg基础上实现了瓦片调度插件,可选的四叉树调度插件,更多的地理数据加载插件(包括GDAL,ogr,WMS,TMS,VPB,filesystem等),再结合一套地理投影转换插件,这样就能够实现高效处理加载调度地理数据在三维地球上的显示,实现三维虚拟地球. 想要实现一个简单的基于osgEarth的三维地球,有两种方式,这两种方式是互通的.一种基于XML标签的earth文件加载,另外一种是采用C++代码,本质是