html5中Canvas API

Canvas API（画布）用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap)。

1.Canvas基本框架

*HTML

<canvas id="canvas" style="width: ;height= ;">您的浏览器不支持canvas!</canvas>//标签里面可以设置style，符合W3C标准.

*Javascript

每个canvas节点都有一个对应的context对象（上下文对象），Canvas API定义在这个context对象上面，所以需要获取这个对象，方法是使用getContext方法。

var canvas=document.getElementById('canvas');

var context=canvas.getContext('2d');//使用context进行绘制

注:如果getContext的参数是"webgl",就表示用于生成3D图像（即立体图案）.

2.基本绘图状态

*直线

context.moveTo(x,y);//起始位置

context.lineTo(x,y);//终点坐标

*弧线

context.arc(cx,cy,r,sAng,eAng,anticlock);//cx，cy是圆心坐标；r是半径；sAng,eAng是圆弧的角度；anticlock-布尔值(表示顺时针还是逆时针作图)

*封闭图形-隔开每次画图

context.beginPath();//开始新的状态路径绘制

context.closePath();//关闭此次绘制

3.绘图样式

context.lineWidth-线条宽度

context.strokeStyle-绘图线条的样式

context.fillStyle-填充的样式

4.绘图

context.stroke();-绘图命令

context.fill()；-填充命令

5.指定区域刷新

contetx.clearRect(x,y,width,height);

6.找到canvas画布

context.canvas

7.canvas画布本身的属性

canvas.width

canvas.height

canvas.getContext('2d')//绘图环境

8.绘制动画效果

setInterval(function(){

render();//渲染

update();//数据更新

},50);//定时器

9. 绘制文本-fillText(string, x, y) 用来绘制文本，它的三个参数分别为文本内容、起点的x坐标、y坐标。使用之前，需用font设置字体、大小、样式（写法类似与CSS的font属性）。与此类似的还有strokeText方法,用来添加空心字。

// 设置字体
ctx.font = "Bold 20px Arial";
// 设置对齐方式
ctx.textAlign = "left";
// 设置填充颜色
ctx.fillStyle = "#008600";
// 设置字体内容，以及在画布上的位置
ctx.fillText("Hello!", 10, 50);
// 绘制空心字
ctx.strokeText("Hello!", 10, 100);

10.Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

使用 createLinearGradient():

11.Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:

drawImage(image,x,y); // x,y表示图像左上角在画布中的位置

例:var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

html5中Canvas API相关推荐

html5中api有什么,HTML5中的API概览
HTML5中的API概览整理一下HTML5中的常见API. 前言 HTML5中提供了一些功能强大的API,在不考虑兼容性的情况下,比起原生js实现更加简单,比起jQuery可以少引入包,这里整理几个 ...
html5中提供的绘图元素,HTML5中Canvas元素的使用总结
HTML5中Canvas元素的使用总结 Canvas提供了开发者自定义绘图的接口,我们可以公国getContext()函数来获取绘图上下文进行绘制操作,这个函数中可以传入两个参数,其中第1个参数设置绘 ...
php版canvas,PHP实现将HTML5中Canvas图像保存到服务器
这篇文章主要介绍了PHP实现将HTML5中Canvas图像保存到服务器的方法,可实现将Canvas图像保存到服务器的功能,是非常实用的技巧,需要的朋友可以参考下本文实例讲述了PHP实现将HTML5中 ...
html页面画虚线,HTML5中canvas怎么画虚线
HTML5中canvas如何画虚线虚线也可以看成是一段段的实线组成的,而实线是利用context.moveTo(x,y);context.lineTo(x2,y2);context.stroke() ...
html5中canvas画布实现手机端和移动端的刮刮乐效果
用html5中的canvas实现刮刮乐的效果使用html+css实现背景的样式使用clearRect()方法实现挂去的作用手机端使用addEventListener()监听手机端滑动事件tou ...
HTML5 利用canvas API 展示阴影效果
HTML5的Canvas自带API可以显示阴影效果,主要还是在画布(canvas)的上下文对象(context)上做文章 <!DOCTYPE html> <head> < ...
关于HTML5中Canvas的宽、高设置问题
Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法: 方法一: 1 <canvas width="500" height="500& ...
html中间一条虚线怎么画,【html5】HTML5中canvas怎样画虚线
在canvas API中,我们发现仅仅提供了画实线的方法实现,并没有虚线的相关方法,那么怎样实现画虚线呢? 现实中,虚线是由一小段小段的实线线段组成,那么仅仅要我们通过画出等长度的线段就能够组成我们想 ...
弥补Web开发缺陷实战 HTML5 中存储API
COOKIES的限制和缺陷首先,让我们来回顾下 cookies.Cookies 的出现可谓大大推动了Web的发展,但它既有优点也有一定的缺陷.Cookies 的优点在于,它可以允许我们在登陆网站时, ...
微信小程序合成海报_利用微信小程序中Canvas API来合成海报生成组件封装
每个小程序成型后,一般都会选择生成带菊花码的海报分享出去来吸引更多的流量.下面来介绍下其他的一种实现方式吧原理:主要利用微信小程序强大的Canvas API来合成,生成后可用wx.canvasToT ...

html5中Canvas API

10.Canvas - 渐变

html5中Canvas API相关推荐

最新文章

热门文章