Canvas学习笔记一

最新推荐文章于 2021-06-24 10:41:42 发布

liupengs

最新推荐文章于 2021-06-24 10:41:42 发布

阅读量1k

点赞数 1

分类专栏： HTML5 文章标签： canvas Canvas createLinearGradient createRadialGradient fillStyle html5 HTML5 Html5

本文链接：https://blog.csdn.net/liu1013714929/article/details/8456040

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.创建Canvas

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

canvas的属性有height，width，id. height和width 是可选的，默认高度为150px,宽度为300px,可以通过javascript和 CSS改变。可以给canvas指定style.

如果所用的浏览器不支持canvas可以在canvas中添加替换元素，用来显示内容，如：

要显示的内容（比如图片或者文字）

</canvas>

2. canvas没有画图的能力，必须通过脚本语言操作canvas来画图，通过 getContext 方法来返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

 var canvas = document.getElementById(' myCanvas ');
    var ctx = canvas.getContext('2d');
通过document.getElementById(' myCanvas ')获取Canvas的DOM节点，再通过canvas.getContext()获得上下文画图操作。通过getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

3.如果浏览器不支持Canvas可以通过替换内容来显示要显示的内容，当然也可以能过脚本来判断当前浏览器是否支持。比如：

   var canvas = document.getElementById(' myCanvas ');
          if( canvas.getContext){
                  //支持
          }else{
                  //不支持
          }

4.下面是一个示例：

<!DOCTYPE HTML>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>
    <canvas id="tutorial" width="150" height="150" style="border:1px solid #000"></canvas>
    <script type="text/javascript">
      function draw(){
	  var canvas = document.getElementById('tutorial');
	  if (canvas.getContext){
	       var ctx = canvas.getContext('2d');
               ctx.fillStyle = "rgb(200,0,0)";
               ctx.fillRect (10, 10, 55, 50);
               ctx.fillStyle = "rgba(66, 66, 66, 0.5)";
               ctx.fillRect (30, 30, 55, 50);
          }
      }
      window.οnlοad=function(){
      	draw();
      };
    </script>
  </body>
</html>

5.canvas fillStyle 属性:

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

默认值： #000000
JavaScript 语法： context.fillStyle=color|gradient|pattern;

默认值：	#000000
JavaScript 语法：	context.fillStyle=color\|gradient\|pattern;

属性值

值描述
color 指示绘图填充色的 CSS 颜色值。默认值是 #000000。
gradient 用于填充绘图的渐变对象（线性或放射性）
pattern 用于填充绘图的 pattern 对象

值	描述
color	指示绘图填充色的 CSS 颜色值。默认值是 #000000。
gradient	用于填充绘图的渐变对象（线性或放射性）
pattern	用于填充绘图的 pattern 对象

color可以是：

ctx.fillStyle="#0000ff"

ctx.fillStyle = "rgb(200,0,0)";

ctx.fillStyle = "rgba(66, 66, 66, 0.5)";// rgb()、 rgba()参阅CSS3

gradient：

线性：createLinearGradient()

                       grd=ctx.createLinearGradient(0,0,170,0);//参阅6.createLinearGradient（）
                       grd.addColorStop(0,"black");
                       grd.addColorStop(1,"white");
                       ctx.fillStyle=grd;

放射性：createRadialGradient()

                       grd=ctx.createRadialGradient(75,50,5,90,60,100);//参阅7.create Radial Gradient（）
                       grd.addColorStop(0,"red");
                       grd.addColorStop(1,"white");
                       ctx.fillStyle=grd;

6.canvas createLinearGradient（x0,y0,x1,y1）方法

参数描述
x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标

参数	描述
x0	渐变开始点的 x 坐标
y0	渐变开始点的 y 坐标
x1	渐变结束点的 x 坐标
y1	渐变结束点的 y 坐标

用于创建线性的渐变对象。作为 strokeStyle 或 fillStyle 属性的值。

用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。如：

    var c=document.getElementById("myCanvas");    var ctx=c.getContext("2d");
    var my_gradient=ctx.createLinearGradient(0,0,170,0);
    my_gradient.addColorStop(0,"black");
    my_gradient.addColorStop(0.5,"red");
    my_gradient.addColorStop(1,"white");
    ctx.fillStyle=my_gradient;
    ctx.fillRect(20,20,150,100);

7. createRadialGradient(x0,y0,r0,x1,y1,r1) 方法

参数描述
x0 渐变的开始圆的 x 坐标
y0 渐变的开始圆的 y 坐标
r0 开始圆的半径
x1 渐变的结束圆的 x 坐标
y1 渐变的结束圆的 y 坐标
r1 结束圆的半径

参数	描述
x0	渐变的开始圆的 x 坐标
y0	渐变的开始圆的 y 坐标
r0	开始圆的半径
x1	渐变的结束圆的 x 坐标
y1	渐变的结束圆的 y 坐标
r1	结束圆的半径

创建放射状/圆形渐变对象，用于填充矩形、圆形、线条、文本等等。可作为 strokeStyle 或 fillStyle 属性的值。

用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。如：

8. addColorStop(offset, color)

在渐变中的某一点添加一个颜色变化.

参数描述
off set 这是一个范围在 0.0 到 1.0 之间的浮点值，表示渐变的开始点和结束点之间的一部分。offset 为 0 对应开始点，offset 为 1 对应结束点。
color 以一个 CSS 颜色字符串的方式，表示在指定 offset 显示的颜色。沿着渐变某一点的颜色是根据这个值以及任何其他的颜色色标来插值的。

参数	描述
off set	这是一个范围在 0.0 到 1.0 之间的浮点值，表示渐变的开始点和结束点之间的一部分。offset 为 0 对应开始点，offset 为 1 对应结束点。
color	以一个 CSS 颜色字符串的方式，表示在指定 offset 显示的颜色。沿着渐变某一点的颜色是根据这个值以及任何其他的颜色色标来插值的。

9. fillRect(x, y, width, height)方法

绘制矩形，可以用fillStyle 来填充颜色。

参数描述
x, y 矩形的左上角的坐标。
width, height 矩形的大小。

参数	描述
x, y	矩形的左上角的坐标。
width, height	矩形的大小。

10.画一个线段：

<!DOCTYPE html>
<html>
  <body>
   <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
     Your browser does not support the HTML5 canvas tag.
   </canvas>
   <script>

	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");		
	ctx.beginPath();
	ctx.lineWidth="5";
	ctx.strokeStyle="red"; // 红色路径
	ctx.moveTo(0,75);
	ctx.lineTo(250,75);
	ctx.stroke(); // 进行绘制
			
	ctx.beginPath();
	ctx.strokeStyle="blue"; // 蓝色路径
	ctx.moveTo(50,0);
	ctx.lineTo(150,130);
	ctx.stroke();  cxt.fill();	
    </script>
  </body>
</html>

beginPath：beginPath() 方法开始一条路径，或重置当前的路径。

moveTo(x , y)：一条路径的开始，x/y分别是起始位置的横纵坐标。

lineTo(x , y) : 添加一个新点，然后创建从该点到画布中最后指定点的线条.

stroke() : 绘制当前路径.

closePath() : 方法关闭一条打开的子路径

11. strokeStyle属性：

和fillStyle 相似，不过fillStyle 是用于整个图形上色，而strokeStyle是给边缘上色。

liupengs

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas学习笔记一

1.创建Canvas canvas的属性有height，width，id. height和width 是可选的，默认高度为150px,宽度为300px,可以通过javascript和 CSS改变。可以给canvas指定style. 如果所用的浏览器不支持canvas可以在canvas中添加替换元素，用来显示内容，如：
复制链接

扫一扫

专栏目录