HTML5----Canvas 学习笔记一

最新推荐文章于 2021-05-31 03:10:04 发布

YL1214012127

最新推荐文章于 2021-05-31 03:10:04 发布

阅读量518

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/YL1214012127/article/details/48184351

版权

HTML 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

HTML5 的canvas元素使用JavaScript在网页上绘制图像

其拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法。

1、Canvas元素的创建（规定元素的id，宽度和高度）

2、JavaScript绘制：

var c = document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#ff0000";

cxt.fillRect(0,0,150,75);

</sctipt>

这段代码必须要写在<body>标签中才可以。

通过document来获取对象Canvas

通过Canvas.getContext（）获取上下文cxt是内建的HTML5对象，拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法

cxt.fillStyle="#ff0000";//设置填充颜色 RGB

cxt.fillRect(0,0,150,75);//设置填充区域左上右下（0，0）用于描绘一个已知左上角顶点位置以及宽和高的矩形，描绘完成后Context的绘制起点会移动到该矩形的左上角顶点。参数表示矩形左上角顶点的x、y坐标以及矩形的宽和高。

使用<canvas>标记，大多数Canvas绘图API都没有定义在<canvas>元素身上，而是定义在功过Canvas的getContext方法获得的一个"绘图环境”对象上。

CanvasAPI也使用了路径的表示法，但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用beginPath和arc（）方法。

一旦定义了路径其他方法，比如fill（）都对此路径操作，绘图环境的各种属性，比如fillStyle，说明了这些操作如何使用。

注释：Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 <canvas> 图形，必须要么自己绘制它再用位图图像合并它，或者在 <canvas> 上方使用 CSS 定位来覆盖 HTML 文本。

Canvas画线：

cxt.moveTo( x, y);//移动到要画线的位置默认状态下，第一条路径的起点是画布的(0, 0)点，之后的起点是上一条路径的终点。两个参数分为表示起点的x、y坐标值。

cxt.lineTo(int x,int y);//从当前的位置画线到x,y坐标位置用于描绘一条从起点从指定位置的直线路径，描绘完成后绘制的起点会移动到该指定位置。参数表示指定位置的x、y坐标值。

cxt.stroke();//依路径绘制线条另：cxt.fillRect(int x,int y,int x,int y)依路径来填充图形

Canvas画圆：

cxt.fillStyle="#ff0000";

cxt.beginPath();//开始路径

cxt.arc( x,y,radius,startAngle,endAngle,anticlockwise);//如：cxt.arc(70,18,15,0,Math.PI*2,true); 用于描绘一个以(x, y)点为圆心，radius为半径，startAngle为起始弧度，endAngle为终止弧度的圆弧。anticlockwise为布尔型的参数，true表示逆时针，false表示顺时针。参数中的两个弧度以0表示0°，位置在3点钟方向；Math.PI值表示180°，位置在9点钟方向。如果Mathi。PI*2的画，就是360°，也就是一个圆。

cxt.closePath();//你懂的。。

cxt.fill();//用于使用当前的填充风格来填充路径的区域。

画圆代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author@yang..." content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>..正在自学HTML5...</title>
</head>
<style type="text/css">
h1{color:blue;text-shadow:2px 5px 5px rgba(0,0,0,1);text-align:center;font-size:30px;}
body{background:red}
.canvasClass{background:green}
</style>
<body>
<h1>...正在学习HTML--Canvas</h1>
<canvas id="myCanvas" width="500" height="500"class="canvasClass"></canvas>

</body>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#ff0000";//填充颜色
ctx.beginPath();
/**cxt.arc( x,y,radius,startAngle,endAngle,anticlockwise);//如：cxt.arc(200,200,60,0,Math.PI*2,true); 用于描绘一个以(x, y)点为圆心，radiu startAngle为起始弧度，endAngle为终止弧度的圆弧。anticlockwise为布尔型的参数，
true表示逆时针，false表示顺时针。参数中的两个弧度以0表示0°，位置在3点钟方向；
Math.PI值表示180°，位置在9点钟方向。如果Mathi。PI*2的画，就是360°，也就是一个圆。
**/
ctx.arc(200,200,60,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
</script>
</html>

效果如下：

Canvas绘制渐变背景：

var grd =cxt.createLinearGradient(0,0,175,50);//创建线性渐变后面的参数是位置：左上右下。它在指定的起始点和结束点之间线性地内插颜色值。还可以创建放射性渐变createRadialGradient（xstart,ystart,radiusStart,xend,yend,radiusEnd）; xstart,ystart开始圆的圆心坐标，radiusStart开始圆的直径，xend,yend结束圆心的坐标。radiusEnd结束圆的直径。该对象在两个指定圆的圆周之间放射性地插值颜色。

注意，这个方法并没有指定任何用来渐变的颜色。使用返回对象的 addColorStop() 方法做到这一点。要使用一个渐变来勾勒线条或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。

grd.addColorStop(0,"#ff0000");//addColorStop(offset,color)在渐变中的某一点添加一个颜色渐变。offset这个值在0.0到1.0之间浮动，表示渐变的开始点和结束点之间的一部分0为开始点，1代表结束点。color已css颜色字符串的方式，表示在指定offset显示的颜色。该方法可以调用一次或多次来改变渐变的开始点和结束点之间的特定百分段的颜色。

grd.addColorStop(1,"#ff0000");

cxt.fillStyle=grd;

cxt.fillRect(0,0,175,50);

Canvas画图像：

var img = new Image();

img.src="/i/flower.png";//只要是 Gecko 支持的图像（如 PNG，GIF，JPEG等）都可以引入到 canvas 中，而且其它的 canvas 元素也可以作为图像的来源。图像的引入还有一种方法：

var img = new Image();、、新建一个图像对象

img.onload = function(){//exectute drawImage statements here};

img.src = 'myImage.png';//设置资源路径

cxt.drawImage(img,0,0);// image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标