HTML5- Canvas入门（一）

最新推荐文章于 2022-11-06 17:41:14 发布
最新推荐文章于 2022-11-06 17:41:14 发布
阅读量533 收藏
点赞数
分类专栏： HTML5 jQUery CSS

周老虎落网的时候，网易跟腾讯都推出了牛逼轰轰的HTML5页面来展示其关系网（网易http://news.163.com/special/data_zyk/  ，腾讯http://news.qq.com/zt2014/zykgxw/index.htm），查看这俩页面，都是通过H5中canvas强大的绘图功能来实现的。如果你未曾学习过H5，看完这俩屌炸天的页面，兴许会勾起你学习的欲望。

canvas其实没有那么玄乎，它不外乎是一个H5的标签，跟其它HTML标签如出一辙：

<canvas></canvas>


canvas本身没有任何的绘图能力，所有的绘图工作都是通过js来实现的。通常我们在js通过getElementById来获取要操作的canvas（这意味着咱得给canvas设个id）：

复制代码 
<canvas id="myCanvas"></canvas>

<script>
var c = document.getElementById("myCanvas"); //获取要操作的canvas
//操作canvas的代码...
</script>
复制代码

注意最好在一开始的时候就给canvas设置好其宽高（若不设定宽高，浏览器会默认设置canvas大小为宽300、高100像素），而且不能使用css来设置（会被拉伸），建议直接写于canvas标签内部：

<canvas id="myCanvas" width="200" height="200"></canvas>

也可以在js脚本中设置：

复制代码 
<canvas id="myCanvas"></canvas>

<script>
var c = document.getElementById("myCanvas");
c.width=200;
c.height=200;
</script>
复制代码

关于canvas大小需要知道的一点是，后续咱们对canvas所做的全部绘图操作，超出此大小范围的部分是不可见的。顾名思义，可以把canvas看成一块画布，其大小是咱设定好的宽高，那么无论你怎么画，画布外的地方自然是画不到的。

对于有些浏览器是不支持canvas功能的，我们可以直接在canvas标签中写一些替换内容，在浏览器不支持canvas时显示：

<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>

接着在聊如何在canvas上绘图前，咱得先说说.getContext("2d")这东西。
.getContext() 是canvas的绘图对象/方法，要让canvas执行绘图工作必须先获取canvas的.getContext()对象来执行。

.getContext()只接受一个参数，该参数用于获取canvas的绘图环境，例如.getContext("2d")表示该canvas的绘图环境为2D平面（可以绘制文本、直线、弧线、矩形、圆形等）。当前H5只支持2D环境，在不久的将来会开放3D绘图功能。（故咱可将“getContext”翻译为“获取绘图环境”）

理论不多说，我们先来个小例子，从最简单的绘制直线开始：

复制代码 
<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.moveTo(10,10);   //定义绘画开始的位置
ctx.lineTo(150,50);  //画一条直线，结束点坐标是x=150,y=50
ctx.stroke();  //描边
</script>
复制代码

效果如下：

在这里我们使用了3个getContext("2d")对象的绘图方法：

.moveTo(x坐标 , y坐标)      可以理解为定位画笔在画布上的位置（注意所有绘图方法所定义的坐标是相对canvas而言的而不是浏览器窗口，对canvas来说，最左上角的点的坐标是(0,0)）

.lineTo(x坐标 , y坐标)      顾名思义，就是画一条直线到某个点，很好理解。需要知道的是此方法仅仅做路径运动，而不存在任何视觉上的绘图效果（上色、描边）

.stroke()     描边方法，有玩过AfterEffect的朋友会很清楚，不给运动路径加stroke特效的画是不存在描边效果的，canvas也一样，想要运动路径轨迹能有视觉效果，需要使用相应的上色/描边方法

自此我们很轻松地绘制了一条黑色的直线，但如果我们想要绘制一条红色的或者其它颜色的线段，该怎么做呢？

答案很简单，使用ctx.strokeStyle来设定描边的颜色即可。我们画三条红色的线段吧：

复制代码 
<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC; margin:30px;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.moveTo(0,0);   //咱把“画笔”移到坐标(0,0)
ctx.lineTo(150,50);  //从上个点(0,0)画一条直线，结束点坐标是(150,50)
ctx.lineTo(20,100);  //从上个点(150,50)继续画一条直线，结束点坐标是(20,100)
ctx.moveTo(90,90);   //咱把“画笔”移到坐标(90,90)
ctx.lineTo(80,150);  //从上个点(60,60)继续画一条直线，结束点坐标是(80,150)
ctx.strokeStyle = "red";    //设定描边颜色为红色，只要写在.stroke()方法前面即可
ctx.stroke();  //描边
</script>
复制代码

注释都说的很清楚了，故不再赘述实现原理，其效果如下：

注意在开始绘制路径的时候，一定要加上moveTo(x,y)，否则第一个lineTo()的运动轨迹将不计入绘图中（浏览器会认为没获取到该运动轨迹的起始点，故忽略此线段）。

另外有一个问题，如果上方我们会出来的两条线段（嗯，一条折线，一条直线），我们希望第一条折线是蓝色的，第二条直线是红色的，应当怎么做？

你会地很自然地做如下处理：

复制代码 
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d"); 
  ctx.moveTo(0,0);   
  ctx.lineTo(150,50);  
  ctx.lineTo(20,100); 
  ctx.strokeStyle = "blue";    //设定描边颜色为蓝色
  ctx.stroke();  
   
  ctx.moveTo(90,90); 
  ctx.lineTo(80,150);  
  ctx.strokeStyle = "red";    //设定描边颜色为红色
  ctx.stroke();  
</script>
复制代码

但运行脚本会发现，折线除了被描了一遍蓝色，也被描了一遍红色：

这是因为canvas在第二次给路径上色时，是把之前的所有路径轨迹合在一起来上色的，除非咱们让canvas知道那折线和直线应该是独立开来的俩路径。

我们可以使用.beginPath()来解决：

复制代码 
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d"); 
  ctx.moveTo(0,0);   
  ctx.lineTo(150,50);  
  ctx.lineTo(20,100); 
  ctx.strokeStyle = "blue";    //设定描边颜色为蓝色
  ctx.stroke();  
  
  ctx.beginPath();  //告诉canvas咱们要重新绘制一条全新的路径了，之前画的东西从此再无关系
  ctx.moveTo(90,90); 
  ctx.lineTo(80,150);  
  ctx.strokeStyle = "red";    //设定描边颜色为红色
  ctx.stroke();  
</script>
复制代码

有的朋友一开始会搞不清楚beginPath()的用途，觉得有moveTo()就可以了，其实beginPath()可以做到上述的隔离路径绘制效果的作用，防止之前的效果被污染。

接着唠嗑.strokeStyle的赋值方式，咱们上方是直接用了 ctx.strokeStyle="red" 来定义描边颜色为红色，不过ctx.strokeStyle可获值的形式有三种：

ctx.strokeStyle=color|gradient|pattern;  //即支持 “颜色/渐变/图案笔刷” 的赋值

⑴ 先看看color赋值方式，和我们常规的css赋值是一样的，支持css3颜色值标准，如下例：

复制代码 
//下面四种形式都是一样的，表示描边颜色为“橙色”
ctx.strokeStyle = "orange";
ctx.strokeStyle = "#FFA500";    //#rrggbb形式
ctx.strokeStyle = "rgb(255,165,0)";   //RGB形式
ctx.strokeStyle = "rgba(255,165,0,1)";   //比上面的rgb多了个a（Alpha），即透明度
复制代码

 

⑵ 再看下渐变gradient，这个稍有复杂：

复制代码 
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); 
ctx.moveTo(0,0);   
ctx.lineTo(150,50); 
ctx.lineTo(20,100); 

var grd = ctx.createLinearGradient(0,0,170,0);  //定义线性渐变对象，设定渐变线起始点和结束点坐标，坐标格式为(起始点x,起始点y,结束点x,结束点y)
grd.addColorStop(0,"black");   //定义渐变线起点颜色
grd.addColorStop(0.5,"red");   //定义渐变线中间点的颜色
grd.addColorStop(1,"yellow");  //定义渐变线结束点的颜色

ctx.strokeStyle = grd;   //将渐变对象赋值给strokeStyle
ctx.stroke();  //描边
复制代码

效果如下：

 这里我们提到了一个概念叫“渐变线”，没有玩过设计的朋友需要了解下渐变的知识点，我们可以把LinearGradient（线性渐变，另有放射状/圆形渐变RadialGradient）范围看成一个矩形（你可以通过Illustator、Photoshop等专业设计软件来辅助你理解这点）：

我们一开始定义线性渐变对象的代码 var grd = ctx.createLinearGradient(0,0,170,0) 不外乎就是设定了线性渐变线起始点为(0,0)，结束点为(170,0)。

紧接着我们通过 addColorStop( 渐变线位置<0~1>, 颜色 ) 来设定了渐变色值，分别在渐变线0、0.5、1的位置设置了黑色、红色、黄色，其渐变效果如下：

通过 ctx.strokeStyle = grd 将渐变赋值给描边方法，最终描边得到了我们想要的渐变效果。

 

⑶ 最后看看pattern描边方式，strokeStyle之所以不叫strokeColor是因为它除了支持颜色描边还支持图案描边（搞设计的朋友或许称作笔触描边会更有feel）。

线性渐变描边需要先createLinerGradient(xstart,ystart,xend,yend)，那么设置图案描边自然也要先新建一个canvasPattern对象：

createPattern(image, repetitionStyle)

其中参数 image 代表图案对象，一般通过 document.createElement('img') 或者 new Image() ，再定义其src值来创建该对象。
而repetitionStyle参数很好理解，即图案重复形式，其可选值有"repeat" 、"repeat-x"、"repeat-y" 和"no-repeat" （和css的background-repeat可选值一样，不赘述）。

那我们可以试着这样写：

复制代码 
<body>
<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC; margin:30px;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d"); 

    pic = new Image();   //创建图片对象，或者 pic = document.createElement('img')
    pic.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558870/o_5.jpg";   //定义图片的映射地址
    var redTexture = ctx.createPattern(pic, "repeat");   //定义Pattern对象，设定填充图案为pic图片，填充形式为平铺
    ctx.strokeStyle = redTexture;     //定义描边样式为上一行设定的Pattern描边
    ctx.moveTo(80,10);
    ctx.lineTo(10,90);
    ctx.stroke();
</script>
复制代码

只是在执行效果的时候会发现，执行十次有九次不是我们预期的图片填充效果，而是默认的黑色描边效果，这是为何？

原因在于浏览器可能还未加载完图片pic，就已经执行了ctx.stroke()，解决方法是让ctx在图片pic加载完毕之后才开始执行绘图：

复制代码 
<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC; margin:30px;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d"); 

    pic = new Image();   //创建图片对象，或者 pic = document.createElement('img')
    pic.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558870/o_5.jpg"; 
    pic.onload = patternFill;     //在图片加载完成时执行绘图函数

    function patternFill() {     //定义绘图函数
        var redTexture = ctx.createPattern(pic, "repeat");   
        ctx.strokeStyle = redTexture; 
        ctx.moveTo(80,10);
        ctx.lineTo(10,90);
        ctx.lineWidth = 8;    //定义线段粗度为8像素
        ctx.stroke();
    }
    
</script>
复制代码

效果如下：

注意这里我还加了个 ctx.lineWidth = 8 来设定线段的粗度。

自此我们学习了strokeStyle的三个赋值方式，也学习了上述的通过 ctx.lineWidth = lineWeight 的形式来给线段设定粗度。

最后咱们再学习两个很简单的线段属性 lineCap 和 lineJoin。

⑴ lineCap是设定线段端点的形状（线帽），其值可以是

butt    默认，即线条端点为平直的边缘
round   线条端点为圆角线帽
square  为线条端点添加正方形线帽



 

  View Code

代码效果如下：

光看此图可能看不太出“butt”和"square"的区别，但懂得使用AI绘制矢量的同学们应该比较了解：

⑵ lineJoin则是设定折线的交接处的外角类型，其值可为：

 

miter    默认，折线交接处为尖角 

round   折线交接处为圆角 

bevel   折线交接处为斜角

 
 
 
 
 
 
  View Code

效果如下：

需要了解的是，miter还受到了属性miterLimit的影响（点此查看详细），但个人觉得它跟bevel实现的效果是一致的，故在此不做介绍。

开篇就先讲到这里，主要是对canvas线段绘制功能的介绍，共勉~


转自：http://www.cnblogs.com/vajoy/p/3887608.html

yexiaomai77
关注
专栏目录
自定义控件三部曲之绘图篇(十九)——LinearGradient与闪动文字效果
启舰
08-29 1万+
前言：家和万事兴 博主这段时间工作实在是太忙了，全天无尿点……博客一直没更新，实在对不住大家…… 现在CSDN的图片上传功能又废了……等会再传图片吧……真是服了…… 这篇就给大家讲setShader的另一个参数，LinearGradient，使用过shape标签的同学，对这个方法估计都不莫生，就是线性渐变。跟PhotoShop中的线性渐变的原理和作用是一样的。这篇文章的最终会实现一个闪动文字效果
elm-canvas：Elm的画布图形库
02-06
该模块提供了一个不错的绘图API，可在DOM画布上使用。 （） 用法 要使用它，请阅读Canvas模块上的文档，并记住在初始化Elm应用程序之前在页面中包含elm-canvas自定义元素脚本。 无需安装任何内容即可使用库的良好...
html画布canvas标签的使用(附赠three.js)
weixin_68658847的博客
11-06 1912
html画布标签的使用
HTML5中的Canvas绘图操作（五）
「行到水穷处,坐看云起时」
08-19 1336
好吧这个系列终于要完了，继续展示特效效果。 幻灯片效果： 这个很简单，无非是建立一个定时器去刷新图片。 Canvas Image Rotator Example var imagePaths = [ "images/j0149014.jpg", "images/j0149024.jpg", "images/j0149029.jpg", "imag
canvas08:lineCap属性与绘制线两端样式
蜡笔love小新的博客
04-23 1689
lineCap:用于绘制线条两端的样式。属性值有“butt”、“round”、“square”。 属性值 作用 butt 默认，线条的两端为平行的边缘 round 向线条的两端添加半圆形线帽 square 向线条的两端添加正方形线帽 案例： 绘制三条直线，分别使用lineCap的三个属性绘制末端，观察区别。 代码： <body...
canvas的lineCap线段端点模样和 lineJoin线段连接处模样
编程界明世隐的博客
01-15 1541
lineCap设置线段端点显示的模样。它可以为下面的三种的其中之一：butt，round和square，默认是butt。 window.onload=function(){ var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getContext('2d'); ctx.beginPath(); ...
Xpra-canvas-client:HTML5Canvas Xpra 客户端
06-17
此客户端基于现代浏览器的HTML5 canvas ，并允许直接在浏览器中呈现您的X11应用程序并与之交互。 该库是基于Event的，并尝试为Xpra协议的每个部分提供完整且易于学习的封装，并且不要让用户处理所有其他低级编程...
HTML5-Canvas-Game-Boilerplate：提供一组默认代码，使HTML5 canvas游戏的启动和运行变得非常容易
02-04
即使对于从未使用过Canvas的开发人员，该项目也可以使启动交互式2D Canvas应用程序变得轻松快捷。 该项目包括的精简版，并添加了一些特定于Canvas的样板以及一些有用JavaScript抽象。 换句话说，它包括您将要为每个...
HTML5- Canvas入门（二）
Night_Emperor的博客
12-31 368
原文链接：http://www.cnblogs.com/vajoy/p/3914131.html 上篇文章我们了解了canvas的定义、获取和基础的绘图操作，其中的绘图功能我们讲解了线段绘制、上色、描边等方面知识点。 今天我们来讲讲矩形（Rectangle）和多边形的绘制。 矩形的绘制一共有两个口令，分别是 ctx.fillRect(x, y, width, height) 
Html5 canvas学习1-描边 渐变 直线 矩形
5big的博客
12-18 1167
1.坐标系统默认是300*150像素大小，以左上角为原点。canvas 的左上角坐标为 (0,0) 可以通过下面方式来交换坐标: 平移（translate） 旋转（rotate） 缩放（scale）2.创建<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> <scr
HTML canvas addColorStop() 、createLinearGradient() 、createRadialGradient() 方法
ssisse的博客
08-19 6629
HTML canvas createLinearGradient() 方法 定义和用法 createLinearGradient() 方法创建线性的渐变对象。 渐变可用于填充矩形、圆形、线条、文本等等。 提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。 提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gra
canvas学习之渐变---createLinearGradient
昨天丶今天丶明天的的博客
08-14 9952
在canvas画出的矩形, 圆形, 线条, 文本等的各种形状中，可以使用渐变来对各种形状的填充颜色进行一定程度上的颜色渐变效果，实现效果如下图所示 createLinearGradient(x,y,x1,y1) - 创建线条渐变 addColorStop(index,color)方法指定颜色停止，参数使用index来描述，index范围在0-1之间，0.5即给定横纵坐标的50%，color...
canvas中如何设置渐变色
傾的博客
08-14 8127
CanvasGradient在canvas中是专门设置颜色渐变的一个类。它分为两种，一种是createLinearGradient()，即线性渐变；另一种是createRadialGradient()，即径向渐变；在设置之前，需要了解它们的使用方法：CanvasGradient.addColorStop(offset(0-1),color),offset是偏移值，它的值在0-1之间，color是要渐
HTML5之Canvas入门
11-24
HTML5环境下Canvas入门, 在Chrome或FF环境下可以预览, 些例说明了Canvas下可以随意的进行画图, 我的例子主要以带圆角的矩形及渐变颜色为例子
绘制渐变图形
ziy10231207的博客
07-13 1494
绘制线性渐变： fillStyle方法在填充的时候指定填充的颜色，这个方法除了可以指定颜色之外还可以用来指定填充的对象；渐变是指在填充的时候从一种颜色过渡到另一种颜色；         线性渐变，需要用到LinearGradient对象，使用图形上下文对象的createLinearGradient方法创建该对象，这个方法的定义如下所示 context.createLinearGradient
线性渐变LinearGradient的使用
倒骑驴走着瞧的博客
12-28 8904
如下图所示是产品设计出来的自定义view，风险等级的；其中的一部分就是中间的那个渐变的bar；这里就讲解下LinearGradient整个自定义view可以拆分成几部分： 绘制： - 中间的条形bar - 上下的刻度线和刻度值 - 下面的圆圈 - 滑块 - 左下角和右下角的文字（整个可以忽略） 事件： - 滑块的滚动 - 刻度值的放大 - 滑块的矫正（只能滑到刻度
线性渐变LinearGradient使用总结
热门推荐
sqf251877543的博客
03-01 2万+
Android 支持三种颜色渐变， LinearGradient（线性渐变）、 RadialGradient （径向渐变）、 SweepGradient（扫描渐变）。这三种渐变均继承自android.graphics.Shader， Paint 类通过setShader()方法来支持渐变。 这篇文章先总结LinearGradient的使用， RadialGradient （径向渐变）、 Sweep...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值