尊龙凯时网址

关于h5的canvas -尊龙凯时网址

2023-08-16

1、什么是canvas?

标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布。

canvas可以绘制路径、图形、字以及添加图像。

2、创建一个画布

canvas中需要指定一个id属性供脚本引用,width和height定义画布的大小。另外可以用style来添加画布边框。

3、使用js绘制图像

canvas本身没有绘图能力,所有的绘图工作必须在js内部完成:

首先找到canvas元素:

var  can=document.getelementbyid("can");

其次创建context对象(getcontext("2d")对象是内建的h5对象,拥有多种绘制图形方法):

var  ctx=can.getcontext("2d");

设置填充图形的颜色:

ctx.fillstyle="#ff0000";    // fillstyle可以是css颜色,渐变,或图案,默认设置是黑色(#000000)

定义矩形:

ctx.fillrect(0,0,150,70);    //  fillrect(x,y,width,height)定义了矩形及其长宽

4、canvas坐标

canvas是一个二维网格。cancas的左上角坐标为(0,0),上面的fillrect方法的参数(0,0,150,70)意思就是从左上角(0,0)开始在画布上绘制一个150*70的矩形。

5、canvas路径

画线:

beginpath();新建一条路径

moveto(x,y);定义线条开始坐标

lineto(x,y);定义线条结束坐标

closepath();闭合路径后,图形绘制又重新回到上下文中

stroke();通过线条来绘制图形轮廓

fill();通过填充路径的内容区域生成实心的图形

实例:

var  can=document.getelementbyid("can");

var  ctx=can.getcontext("2d");

ctx.moveto(0,0);

ctx.lineto(200,100);

ctx.stroke();

画圆:

1、arc(x1,y1,x2,y2,radius);

根据给定的控制点和半径画圆弧

ctx.arc(95,50,40,0,2*math.pi);

2、arc(x,y,r,startangle,endangle,anticlockwise);

以(x,y)为圆心,r为半径,从startangle弧度开始到endangle弧度结束。anticlockwise为true表示逆时针,false为顺时针

0弧度指x轴正方向  ,角度转换成弧度:(math.pi/180)*degrees

ctx.arc(50,50,40,0,math.pi/2,false);

arcto方法的说明:

​ 这个方法可以这样理解。绘制的弧形是由两条切线所决定。

​ 第 1 条切线:起始点和控制点1决定的直线。

​ 第 2 条切线:控制点1 和控制点2决定的直线。

​ 其实绘制的圆弧就是与这两条直线相切的圆弧。

贝塞尔曲线请自行上网搜索。

6.canvas文本

font定义字体

filltext(text,x,y)绘制实心文本

stroketext(text,x,y) 绘制空心文本

var c=document.getelementbyid("mycanvas");

var ctx=c.getcontext("2d");

ctx.font="30px arial";

ctx.filltext("hello world",10,50);

7、canvas渐变

createlineargradient(x,y,x1,y1)创建线条渐变

createradialgradient(x,y,r,x1,y1,r1)创建一个径向/圆渐变

addcolorstop()指定颜色停止,参数使用坐标描述,可以是0至1

线性:

var c=document.getelementbyid("mycanvas");

var ctx=c.getcontext("2d");

// 创建渐变

var grd=ctx.createlineargradient(0,0,200,0);

grd.addcolorstop(0,"red");

grd.addcolorstop(1,"white");

// 填充渐变

ctx.fillstyle=grd;

ctx.fillrect(10,10,150,80);

径向:

// 创建渐变

var grd=ctx.createradialgradient(75,50,5,90,60,100);

grd.addcolorstop(0,"red");

grd.addcolorstop(1,"white");

// 填充渐变

ctx.fillstyle=grd;

ctx.fillrect(10,10,150,80);

8、canvas图像

drawimage(image,x,y);

var c=document.getelementbyid("mycanvas");

var ctx=c.getcontext("2d");

var img=document.getelementbyid("scream");

或者 var img=new image();

img.src="flower.png";

ctx.drawimage(img,10,10);

9、添加样式和颜色

fillstyle =color  设置图形填充颜色

strokestyle=color 设置图形轮廓颜色

10、变形

translate(x,y)用来移动canvas的原点到指定的位置

rotate(angle)旋转坐标轴(angle为顺时针方向,弧度为单位,旋转中心为坐标原点)

11、同一个画布如何只改变其中一条线的颜色:(先保存线条在涂色,然后restore到上一状态)

function arrow2(canid, ox, oy, x1, y1, x2, y2,color) {
//参数说明 canvas的 id ,原点坐标 第一个端点的坐标,第二个端点的坐标
var sta = new array(x1, y1);
var end = new array(x2, y2);

var canvas = document.getelementbyid(canid);
if(canvas == null) return false;
var ctx = canvas.getcontext('2d');

//画线
ctx.beginpath();
ctx.translate(ox, oy); //坐标源点
ctx.moveto(sta[0], sta[1]);
ctx.lineto(end[0], end[1]);
ctx.save();
ctx.strokestyle=color;//线条颜色
ctx.fillstyle = color;//箭头颜色
ctx.fill();
ctx.stroke();

//画箭头
ctx.translate(end[0], end[1]);
//我的箭头本垂直向下,算出直线偏离y的角,然后旋转 ,rotate是顺时针旋转的,所以加个负号
var ang = (end[0] - sta[0]) / (end[1] - sta[1]);
ang = math.atan(ang);
if(end[1] - sta[1] >= 0) {
ctx.rotate(-ang);
} else {
ctx.rotate(math.pi - ang); //加个180度,反过来
}
ctx.lineto(-5, -10);
ctx.lineto(0, -5);
ctx.lineto(5, -10);
ctx.lineto(0, 0);
ctx.fill(); //箭头是个封闭图形
ctx.restore(); //恢复到堆的上一个状态
ctx.closepath();
}

画布如果与div或其他块标签冲突,可以让画布背景变透明加style如下:

你的浏览器不支持canvas,请升级你的浏览器

z-index代表叠加顺序。

另外详细:https://blog.csdn.net/u012468376/article/details/73350998

关于h5的canvas的相关教程结束。

网站地图