【yzc518亚洲城】canvas api

canvas api

2016/01/11 · HTML5 ·
Canvas

最初的小说出处: 韩子迟   

Canvas
API(画布)用于在网页实时变化图像,并且能够操作图像内容,基本上它是三个得以用JavaScript操作的位图(bitmap)。
应用前,首先供给新建多个canvas网页成分。

新近要安不忘虞二回组内分享有关canvas 的1个神奇的使用。

canvas

【yzc518亚洲城】canvas api。主干骨骼


 

<canvas id=”canvas” width=1000 height=1000 style=”border: 1px black
dotted”></canvas> <script> var ctx =
document.getElementById(‘canvas’).getContext(‘2d’); </script>

1
2
3
4
5
<canvas id="canvas" width=1000 height=1000 style="border: 1px black dotted"></canvas>
 
<script>
  var ctx = document.getElementById(‘canvas’).getContext(‘2d’);
</script>
1
2
3
4
<canvas height="200" id="myCanvas" width="400">
    您的浏览器不支持canvas!
</canvas>
<!-- 如果浏览器不支持这个API,则就会显示canvas标签中间的文字——“您的浏览器不支持canvas!”。 -->

实际上本身对于canvas学过很频繁,不过因为日常不咋用,就一而再忘记。

标签

<canvas width="600" height="400" id="canvas"></canvas>

不给宽高的话默认是300+150

矩形


实心:

// 填充色 (暗中同意为粉末蓝) ctx.fillStyle = ‘darkSlateBlue’; //
规定画布左上角坐标为 (0, 0) // 矩形左上角坐标 (0, 0) // 矩形大小
100*100 ctx.fillRect(0, 0, 100, 100);

1
2
3
4
5
6
7
// 填充色 (默认为黑色)
ctx.fillStyle = ‘darkSlateBlue’;
 
// 规定画布左上角坐标为 (0, 0)
// 矩形左上角坐标 (0, 0)
// 矩形大小 100*100
ctx.fillRect(0, 0, 100, 100);

空心:

// 边框颜色 (私下认可雪白) ctx.strokeStyle = ‘darkSlateBlue’; //
规定画布左上角坐标为 (0, 0) // 矩形左上角坐标 (0, 0) // 矩形大小
100*100 ctx.strokeRect(0, 0, 100, 100);

1
2
3
4
5
6
7
// 边框颜色 (默认黑色)
ctx.strokeStyle = ‘darkSlateBlue’;
 
// 规定画布左上角坐标为 (0, 0)
// 矩形左上角坐标 (0, 0)
// 矩形大小 100*100
ctx.strokeRect(0, 0, 100, 100);

每一种canvas成分都有二个应和的context对象(上下文对象),Canvas
API定义在这些context对象方面,所以须求取得那几个目的,方法是采纳getContext方法。

估计这一次分享后 依然忘记,,oudoukaji

怎么用

//拿到canvas
var canvas = document.getElementById("canvas");
//创建画图工具
var context = canvas.getContext("2d");

圆形


实心:

ctx.fillStyle = ‘darkSlateBlue’; ctx.beginPath(); ctx.arc(100, 100, 50,
0, Math.PI * 2, true); ctx.closePath(); ctx.fill();

1
2
3
4
5
6
ctx.fillStyle = ‘darkSlateBlue’;
 
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

空心:

ctx.strokeStyle = ‘darkSlateBlue’; ctx.beginPath(); ctx.arc(100, 100,
50, 0, Math.PI * 2, true); ctx.closePath(); ctx.stroke();

1
2
3
4
5
6
ctx.strokeStyle = ‘darkSlateBlue’;
 
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, true);
ctx.closePath();
ctx.stroke();
1
2
3
4
5
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
}
// getContext方法指定参数2d,表示该canvas对象用于生成2D图案(即平面图案)。如果参数是3d,就表示用于生成3D图像(即立体图案),这部分实际上单独叫做WebGL API(看博主其他文章)。

相关的api及用法

//画线
context.moveTo(100, 100);
context.lineTo(300, 100);
context.lineTo(300, 200);

//画第二条线
//画第二条线
context.moveTo(100, 300);
context.lineTo(300, 300);

//最后要描边才会出效果
context.stroke();

//创建一张新的玻璃纸
context.beginPath();    
//画第三条线
context.moveTo(500, 100);
context.lineTo(500, 300);

//只要执行stroke,都会玻璃纸上的图形重复印刷一次
context.stroke();

//填充
context.fill();

//设置描边色
context.strokeStyle = "red"; //颜色的写法和css写法是一样的
context.stroke();

//填充
//设置填充色
context.fillStyle = "yellowgreen";
context.fill();

//把路径闭合
context.closePath();

//设置线条的粗细, 不需要加px
context.lineWidth = 15;
//线条的头部的设置
context.lineCap = "round"; //默认是butt, 记住round

线段


ctx.strokeStyle = ‘darkSlateBlue’; ctx.beginPath(); ctx.moveTo(100,
100); // 起点 ctx.lineTo(200, 200); ctx.lineTo(300, 100); //
ctx.closePath(); ctx.stroke();

1
2
3
4
5
6
7
8
ctx.strokeStyle = ‘darkSlateBlue’;
 
ctx.beginPath();
ctx.moveTo(100, 100); // 起点
ctx.lineTo(200, 200);
ctx.lineTo(300, 100);
// ctx.closePath();
ctx.stroke();

canvas画布提供了一个用来作图的平面空间,该空间的各类点都有自个儿的坐标,x表示横坐标,y表示竖坐标。原点(0,
0)位于图像左上角,x轴的正向是原点向右,y轴的正向是原点向下。
绘制路径
beginPath方法表示开头绘制路径,moveTo(x, y)方法设置线段的起源,lineTo(x,
y)方法设置线段的极端,stroke方法用来给透明的线条着色。

享用内容来自这里,前端大全微信公众号的一篇作品。讲的是
隐写术,看上去是不是逼格很高。。

非零填充原则

在由路径围成的区域内部,任意一个点, 拉一条射线。 看和这个射线相交的路径有几条。 路径的方向是顺时针,就是1. 如果逆时针,就是-1, 把所有的值相加, 如果是0, 就不填充, 如是非0, 就填充

图像


动态生成 img:

var img = new Image(); // 一定要等图片载入后(也许已经在缓存中了)才能用
drawImage 方法 img.onload = function() { // 左上角坐标 & 图像大小
ctx.drawImage(img, 0, 0, 100, 56); }; img.src = ‘0.jpg’;

1
2
3
4
5
6
7
8
9
var img = new Image();
 
// 一定要等图片载入后(或者已经在缓存中了)才能用 drawImage 方法
img.onload = function() {
  // 左上角坐标 & 图像大小
  ctx.drawImage(img, 0, 0, 100, 56);
};
 
img.src = ‘0.jpg’;

抑或直接从 dom 中取:

var img = document.getElementById(‘myImg’); ctx.drawImage(img, 0, 0,
100, 56);

1
2
var img = document.getElementById(‘myImg’);
ctx.drawImage(img, 0, 0, 100, 56);
1
2
3
4
5
6
7
ctx.beginPath(); // 开始路径绘制
ctx.moveTo(20, 20); // 设置路径起点,坐标为(20,20)
ctx.lineTo(200, 20); // 绘制一条到(200,20)的直线
ctx.lineWidth = 1.0; // 设置线宽
ctx.strokeStyle = #CC0000; // 设置线的颜色
ctx.stroke(); // 进行线的着色,这时整条线才变得可见
//moveto和lineto方法可以多次使用。最后,还可以使用closePath方法,自动绘制一条当前点到起点的直线,形成一个封闭图形,省却使用一次lineto方法。

canvas
笔者向来不用它写过动画,作者经常切图工作的卡通片难度基本上css3那多少个就能够化解。不过她有三个相当屌的地方正是足以得到图片每一种像素的新闻。就像是本人觉得svg很牛逼的地点正是矢量图 不失真。

画矩形

//直接传入 x, y, width, height, 就可以绘制一个矩形
//画在玻璃纸上

context.rect(100, 100, 200, 200);
context.strokeStyle = "red";
context.stroke();
context.fillStyle = "yellow";
context.fill();

//直接创建一个填充的矩形
//创建玻璃纸, 画矩形路径, 填充, 把玻璃纸销毁
context.fillRect(100, 100, 200, 200);

//黄色的边不会显示,是因为上面那一句,画完之后,就把玻璃纸销毁了
context.strokeStyle = "yellow";
context.stroke();
//如果放在fillRect上面就可以实现

文字


文字)
的职位设定相对复杂,不像矩形、图像一样有个稳定的左上角坐标,也不像圆一样有确定地点的圆心。文字的岗位设置也是三个像样
(x, y) 情势的坐标,这一个职位可以是文字的 4 个角,或许宗旨。

x 部分,蓝线(水平坐标)为 x
坐标所在地点(textAlign
属性):

yzc518亚洲城 1

ctx.font = “bold 80px serif” ctx.textAlign = “start”; // 默许值为 start
ctx.fillStyle = ‘darkSlateBlue’; // 文本内容、坐标 ctx.fillText(‘hello
world’, 0, 0);

1
2
3
4
5
6
ctx.font = "bold 80px serif"
ctx.textAlign = "start";  // 默认值为 start
 
ctx.fillStyle = ‘darkSlateBlue’;
// 文本内容、坐标
ctx.fillText(‘hello world’, 0, 0);

y 部分,蓝线(垂直坐标)为 y 坐标所在地点(textBaseline
属性):

yzc518亚洲城 2

ctx.font = “bold 80px serif” ctx.textAlign = “start”; // 暗中认可值为 start
ctx.textBaseline = “hanging”; // 暗中认可值为 阿尔法betic ctx.fillStyle =
‘darkSlateBlue’; // 文本内容、坐标 ctx.fillText(‘hello world’, 0, 0);

1
2
3
4
5
6
7
ctx.font = "bold 80px serif"
ctx.textAlign = "start";  // 默认值为 start
ctx.textBaseline = "hanging"; // 默认值为 alphabetic
 
ctx.fillStyle = ‘darkSlateBlue’;
// 文本内容、坐标
ctx.fillText(‘hello world’, 0, 0);

故此文字的岗位共有 5*6=30 种。

fillText
方法不帮忙文件断行,即具有文件现身在一行内。所以,假诺要生成多行文本,唯有调用数次fillText 方法。

中空的话用 stroke 即可。

绘制矩形
fillRect(x, y, width,
height)方法用来绘制矩形,它的多少个参数分别为矩形左上角顶点的x坐标、y坐标,以及矩形的宽和高。fillStyle属性用来设置矩形的填充色。

小说写得很仔细 作者就不再写了

圆形绘制

//x轴是0度开始
//x, y: 圆心位置;radius: 半径的长度; startRadian, endRadian 代表的是起始弧度和结束弧度;dircetion代表的圆形的路径的方向,默认是顺时针(是否逆时针, 默认值是false),如果传true就是逆时针,最后一个参数是可以不传的, 默认就是顺时针

context.arc(x, y, radius, startRadian, endRadian, direction);

//从31度的地方,画到81度的地方
context.arc(300, 200, 100, 31/180*Math.PI, 81/180*Math.PI); 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图