HTML 学习笔记 (canvas 基础)
1.什么是Canvas
canvas就是一个画布,可以进行画任何的线,图形,填充等一系列操作。这一切都是用Js操作的,另外Canvas不仅仅提供简单的二维矢量绘图,也提供了三维的绘图,以及图片处理等一系列的api支持。
创建canvas标签
<!--创建canvas元素-->
<canvas id="myCanvas"></canvas>
上面的标签只是一个画布,Id属性是必须的,后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvase的Dom对象就可以获取他的上下文了,Canvas绘制图形都是靠着Canvas对象的上下文对象.
var myCanvas; window.onload = function() {
myCanvas = document.getElementById("myCanvas");
//获取上下文
var context = myCanvas.getContext("2d"); }
Context默认的有两种绘制模式:第一种绘制线(stroke) 第二种填充(fill)
使用canvas 画一个
Canvas绘制的总体的步骤 创建HTML页面,设置画布标签
编写js,获取画布dom对象
通过Canvas标签的Dom对象获取上下文
设置绘制线样式、颜色
绘制矩形,或者填充矩形
使用canvas绘制矩形
<body>
<!--创建canvas元素-->
<canvas id="myCanvas10" width="500" height="500"></canvas>
<script>
var mycanvas = document.getElementById("myCanvas10");
//获取上下文
var context = mycanvas.getContext("2d");
//设置绘画模式
context.strokeStyle = "#FF0000";
context.setLineWidth(1);
//绘制矩形
context.strokeRect(10,10,100,100); //填充模式
context.fillStyle = "blue";
context.fillRect(10,120,100,100);
</script> </body>
效果图
使用canvas绘制图片
var mycanvas = document.getElementById("myCanvas10");
//获取上下文
var context = mycanvas.getContext("2d");
var image = new Image();
image.src = "../img/FoterImage@3x.png";
//当图片加载完成后
image.onload = function() {
context.drawImage(image,10,10);
}
使用canvas绘制线条
Context对象的beginPath方法表示开始绘制路径,moveTo(x, y)方法设置线段的起点,lineTo(x, y)方法设置线段的终点,stroke方法用来给透明的线段着色。moveto和lineto方法可以多次使用。最后,还可以使用closePath方法,自动绘制一条当前点到起点的直线,形成一个封闭图形,省却使用一次lineto方法。
var myCanvas = document.getElementById("myCanvas10");
var context = myCanvas.getContext("2d");
//开始慧子路径
context.beginPath();
//设置线宽
context.setLineWidth(5);
context.strokeStyle = "#CC0000"; // 设置线的颜色
context.moveTo(10,10);
context.lineTo(10,60);
context.lineTo(70,10);
//设置两条线顶端的模式
context.lineCap = "round";
//设置两条线相交的模式
context.lineJoin = "round";
//如果只画两条线 使之称为闭合空间
context.closePath();
context.stroke();
效果图
使用Canvas绘制文本
Context上下文对象的fillText(String,x,y)方法是用来绘制文本的,他的三个参数分别为文本内容,起点坐标x 起点坐标y 需用font设置字体、大小、样式(写法类似与CSS的font属性)。与此类似的还有strokeText方法,用来添加空心字。另外注意一点:fillText方法不支持文本断行,即所有文本出现在一行内。所以,如果要生成多行文本,只有调用多次fillText方法。
var myCanvas = document.getElementById("myCanvas10");
var context = myCanvas.getContext("2d");
context.font = "Bold 20px Arial";
context.textAlign = "left";
context.fillStyle = "#FF0000";
context.fillText("天下第一快",10,30);
效果:
使用Canvas绘制圆和椭圆
在上一篇文章中,笔者已经跟大家介绍过了绘制矩形,绘制其他形状,比如圆形等,都是一个思路,只不过是方法不同罢了。那接下里给各位演示一小绘制圆形和椭圆。Context上下文的arc方法就是绘制圆形或者椭圆,arc方法的x和y参数是圆心坐标,radius是半径,startAngle和endAngle则是扇形的起始角度和终止角度(以弧度表示),anticlockwise表示做图时应该逆时针画(true)还是顺时针画(false)。
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通过id获得当前的Canvas对象
var canvasDom = document.getElementById("demoCanvas");
//通过Canvas Dom对象获取Context的对象
var context = canvasDom.getContext("2d");
context.beginPath();//开始绘制路径
//绘制以 (60,60)为圆心,50为半径长度,从0度到360度(PI是180度),最后一个参数代表顺时针旋转。
context.arc(60, 60, 50, 0, Math.PI * 2, true);
context.lineWidth = 2.0;//线的宽度
context.strokeStyle = "#000";//线的样式
context.stroke();//绘制空心的,当然如果使用fill那就是填充了。
</script>
使用canvas设置渐变色
createLinearGradient方法用来设置渐变色。
设置渐变色
var myCanvas = document.getElementById("myCanvas10");
var context = myCanvas.getContext("2d");
//createLinearGradient方法的参数是(x1, y1, x2, y2),其中x1和y1是起点坐标,x2和y2是终点坐标。
//通过不同的坐标值,可以生成从上至下、从左到右的渐变等等
var myGradient = context.createLinearGradient(0,0,0,160);
myGradient.addColorStop(0,"#FF0000");
myGradient.addColorStop(0.5,"#BABABA");
myGradient.addColorStop(1,"#00FF00");
context.fillStyle = myGradient;
context.fillRect(10,10,200,200);
效果图:
使用Canvas绘制阴影
绘制阴影
context.shadowOffsetX = 10;//设置水平位移
context.shadowOffsetY = 10;//设置垂直位移
context.shadowBlur = 5;//设置模糊程度
context.shadowColor = "#cc0000";
context.fillStyle = "red";
context.fillRect(10,10,200,100);
效果图
//save方法用于保存上下文环境,restore方法用于恢复到上一次保存的上下文环境。
ctx.save();
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = rgba(0,0,0,0.5);
ctx.fillStyle = #CC0000;
ctx.fillRect(10,10,150,100);
ctx.restore();
ctx.fillStyle = #000000;
ctx.fillRect(180,10,150,100);
//先用save方法,保存了当前设置,然后绘制了一个有阴影的矩形。接着,使用restore方法,恢复了保存前的设置.
参考博客 http://www.2cto.com/kf/201502/376960.html
HTML 学习笔记 (canvas 基础)的更多相关文章
- MyBatis:学习笔记(1)——基础知识
MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Django学习笔记(基础篇)
Django学习笔记(基础篇):http://www.cnblogs.com/wupeiqi/articles/5237704.html
- C#学习笔记(基础知识回顾)之值类型与引用类型转换(装箱和拆箱)
一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字 ...
- C#学习笔记(基础知识回顾)之值传递和引用传递
一:要了解值传递和引用传递,先要知道这两种类型含义,可以参考上一篇 C#学习笔记(基础知识回顾)之值类型和引用类型 二:给方法传递参数分为值传递和引用传递. 2.1在变量通过引用传递给方法时,被调用的 ...
- C#学习笔记(基础知识回顾)之值类型和引用类型
一:C#把数据类型分为值类型和引用类型 1.1:从概念上来看,其区别是值类型直接存储值,而引用类型存储对值的引用. 1.2:这两种类型在内存的不同地方,值类型存储在堆栈中,而引用类型存储在托管对上.存 ...
- MAVEN学习笔记之基础(1)
MAVEN学习笔记之基础(1) 0.0 maven文件结构 pom.xml src main java package resource test java package resource targ ...
- mybatis学习笔记之基础复习(3)
mybatis学习笔记之基础复习(3) mybatis是什么? mybatis是一个持久层框架,mybatis是一个不完全的ORM框架.sql语句需要程序员自己编写, 但是mybatis也是有映射(输 ...
- mybatis学习笔记之基础框架(2)
mybatis学习笔记之基础框架(2) mybatis是一个持久层的框架,是apache下的顶级项目. mybatis让程序将主要精力放在sql上,通过mybatis提供的映射方式,自由灵活生成满足s ...
随机推荐
- JavaScript:让浏览器全屏显示
并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...
- ubuntu 14.04LTS 环境下配置NFS服务
简言之,NFS(Network FileSystem,网络文件系统)用于在不同机器,不同操作系统之间通过网络互相分享各自的文件.NFS设计之初就是为了在不同的系统间使用,所以它的通讯协议设计与主机及操 ...
- 前端MVC学习总结(二)——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- JQuery知识点总结
一. 1.JavaScript是Netscape公司开发的一种脚本语言(scripting language).JavaScript的出现实现了使得网页和用户之间实时的,动态的和交互的关系,使网页包含 ...
- ORACLE 11gR2 DG(Physical Standby)日常维护01
环境:RHEL 6.4 + Oracle 11.2.0.4 一.主备手工切换 1.1 主库,切换成备库并启动到mount 1.2 备库,切换成主库并启动到open 1.3 新的备库启动日志应用 二.重 ...
- 『.NET Core CLI工具文档』(二).NET Core 工具遥测(应用信息收集)
说明:本文是个人翻译文章,由于个人水平有限,有不对的地方请大家帮忙更正. 原文:.NET Core Tools Telemetry 翻译:.NET Core 工具遥测(应用信息收集) .NET Cor ...
- Ionic2系列——在Ionic2中使用ECharts
在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...
- SqlDateTime overflow. Must be between 1/1/1753 12:00:00 AM and 12/31/9999 11:59:59 PM.
相信很多人进行数据存储时,会遇上如标题的异常错误. 其实也不算上一个错误. 当你的程序中有宣告一个字段的数据类型为DateTime时,但你又没有赋值给它,就进行存储时,它就会得到这样一个结果. 看看下 ...
- Navisworks Addin 插件集成
调用Navisworks的 Api . 我这里是基于.NET 开发的. 我主要是尝试着获取一下工程量的API.不过还在研究. 插件的启动入口. //插件描述 [PluginAttribute(&quo ...
- Mybatis的choose when otherwise
<select id="getCount" resultType="int"> select count(1) from <choose> ...