码迷,mamicode.com
首页 > 其他好文 > 详细

canvas的介绍

时间:2019-12-14 14:09:04      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:逆时针   comment   半径   阴影   fse   pattern   blur   上下   net   

1.我们前端的绘图技术有哪些:

统计图表:echarts

实时走势图:canvas;

在线画板:魔猴;

HTML5游戏:three.js

2.我这里主要讲的是canvas绘图;

<canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形。

在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。

HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

3.接下来我们来了解怎么用画布:

首先我们要创建一个画布;<canvas></canvas>,画布是可以设置宽高的,但是我们要记住一点,我们设置宽高要写行内样式,不能写=外部样式,因为在外部样式中我们的单位是px,如果我们把画布的宽和高设置大一点,就会失真,画布就会被拉扯大,我们就会看到1px的小方格网;

4.我们首先要获取画布,这是跟我们获取元素是一样的,然后就是canvas.getContext("2d");获取画布对象上下文,即相当于获取画笔;

 

画矩形:

画布的原点是我们的左上角(0 ,0)

ele.fillRect(x轴,y轴,宽度,高度)实心矩形     ele.fillStyle= "颜色”;

我们矩形的坐标也是我们的左上角

ele.strokeRect(x轴,y轴,宽度,高度);空心矩形   ele.strokeStyle = “颜色”;

我们的颜色要放到我们在绘制图形的前面写

 

canvas的路径:

ele.beginPath();这就相当于告诉我们,绘制要开始了;

我们的路径就相当于点线面的过程

我们的坐标点也是从(0,0)开始的;

起始点:moveTo(0,0);

转折点:lineTo();这个是终点,也是转折点;这个可以写多个;

ele.stroke();

ele.closePath()结束

这样路径就绘制好了;

 

画圆:

ele.beginPath();

ele.arc(x,y,半径,开始的弧度,结束的弧度,顺时针)false/true逆时针;

ele.stroke();空心圆;

ele.fill();实心圆

 

绘制文字:

font - 定义字体

fillText(文字,x,y) - 在 canvas 上绘制实心的文本

strokeText(文字,x,y) - 在 canvas 上绘制空心的文本

shadowBlur="5"设置阴影模糊度;

shadowColor = “颜色”

shadowoffsetX = 偏移x的距离;

shadowoffsetY= 偏移y的距离;

线性渐变:
// 创建渐变 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);

扇形渐变

createRadialGradient(75,50,5,90,60,100)开始坐标和半径,结束坐标和半径

 

图像:

获取图片:

var ele = new Image();//创建图片容器

ele.src = “图片路径”;

图片直接在画布是显示不出来的;

为了使图片加载出来我们要使用ele.onload = function(){

canvas.drawImage(ele,x,y,w,h)//图片,坐标,宽高

}

ele.createpattern(图片,“repeat”)平铺

canvas的介绍

标签:逆时针   comment   半径   阴影   fse   pattern   blur   上下   net   

原文地址:https://www.cnblogs.com/zhangli123/p/12038573.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!