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 基础)的更多相关文章

  1. MyBatis:学习笔记(1)——基础知识

    MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...

  2. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  3. Django学习笔记(基础篇)

    Django学习笔记(基础篇):http://www.cnblogs.com/wupeiqi/articles/5237704.html

  4. C#学习笔记(基础知识回顾)之值类型与引用类型转换(装箱和拆箱)

    一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字 ...

  5. C#学习笔记(基础知识回顾)之值传递和引用传递

    一:要了解值传递和引用传递,先要知道这两种类型含义,可以参考上一篇 C#学习笔记(基础知识回顾)之值类型和引用类型 二:给方法传递参数分为值传递和引用传递. 2.1在变量通过引用传递给方法时,被调用的 ...

  6. C#学习笔记(基础知识回顾)之值类型和引用类型

    一:C#把数据类型分为值类型和引用类型 1.1:从概念上来看,其区别是值类型直接存储值,而引用类型存储对值的引用. 1.2:这两种类型在内存的不同地方,值类型存储在堆栈中,而引用类型存储在托管对上.存 ...

  7. MAVEN学习笔记之基础(1)

    MAVEN学习笔记之基础(1) 0.0 maven文件结构 pom.xml src main java package resource test java package resource targ ...

  8. mybatis学习笔记之基础复习(3)

    mybatis学习笔记之基础复习(3) mybatis是什么? mybatis是一个持久层框架,mybatis是一个不完全的ORM框架.sql语句需要程序员自己编写, 但是mybatis也是有映射(输 ...

  9. mybatis学习笔记之基础框架(2)

    mybatis学习笔记之基础框架(2) mybatis是一个持久层的框架,是apache下的顶级项目. mybatis让程序将主要精力放在sql上,通过mybatis提供的映射方式,自由灵活生成满足s ...

随机推荐

  1. MUI 个推获取ClientID的方法

               本次是获取个推ClientID的方法              //监听消息开始             document.addEventListener("plus ...

  2. 分布式系统理论进阶 - Paxos变种和优化

    引言 <分布式系统理论进阶 - Paxos>中我们了解了Basic Paxos.Multi Paxos的基本原理,但如果想把Paxos应用于工程实践,了解基本原理还不够. 有很多基于Pax ...

  3. [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二)

    [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date  周六 10 一月 2015 By 钟谢伟 Category website develop ...

  4. 微信支付:H5吊起支付API,不显示“确认支付、输入密码”界面

    使用公众号进行支付,官方开发帮助文档: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1 其业务流程如下: 按照业务流程进行开发 ...

  5. PID控制

    PID解释: 位置式:      可以看出,比例部分只与当前的偏差有关,而积分部分则是系统过去所有偏差的累积.位置式PI调节器的结构清晰,P和I两部分作用分明,参数调整简单明了.但直观上看,要计算第拍 ...

  6. 深入理解JavaScript——闭包

    跟很多新手一样我也是初入前端,对闭包的理解花费的时间和精力相当的多.效果也还行,今天我就来根据自己的理解细致的讲一讲闭包,由于是初入学习的时候不免有一些弯路和困惑,我想信这也是很多跟我一样的人会同样遇 ...

  7. JSON扩展类——JsonHelper

    1.引用Newtonsoft.Json库(JSON.NET). 2.复制粘贴JsonHelper吧. 源代码: using System; using System.Collections.Gener ...

  8. Debug Databinding Issues in WPF

    DataBinding is one of the most powerful features in WPF. But because it resolves the bindings at run ...

  9. DataGrid 列头实现国际化语言切换

    <DataGrid> <DataGrid.Columns> <DataGridTextColumn Binding="{x:Null}" Width= ...

  10. H-1B身份六年后的延期问题

    http://www.hooyou.com/cn_version/h-1b/extension.html H-1B首次获签的在美国居留时限是三年,三年期满后还可以申请延期再续三年,总计在美国的最长时限 ...