Canvas——路径使用的一些感悟
来源:互联网 发布:批处理卸载软件 编辑:程序博客网 时间:2024/06/11 03:59
路径使用的一些总结:
moveTo()
和lineTo()
函数都是用来移动点,绘制路径的函数,绘制完成后,调用closePath()
函数,它会创建一条由描点的终点通向起点的虚拟路径,闭合整个路径,然后调用stroke()
函数进行描边,最后可以用fill()
函数来填充样式。
简单的实例代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<!--函数 S-->
<script type="text/javascript">
function canFun(){
var canvas=document.querySelector("canvas");
var context=canvas.getContext("2d");
<!--五角星路径 S-->
context.moveTo(76,197);
context.lineTo(421,197);
context.lineTo(143,399);
context.lineTo(248,71);
context.lineTo(356,399);
context.lineTo(76,197);
<!--五角星路径 E-->
<!--中心区域渐变 S-->
var radGrad=context.createRadialGradient(200,190,2,250,250,1800);
radGrad.addColorStop(0.0,"white");
radGrad.addColorStop(0.05,"yellow");
context.fillStyle=radGrad;
<!--中心区域渐变 E-->
<!--描边和填充 S-->
context.closePath();
context.lineWidth = 8;
context.stroke();
context.fill();
<!--描边和填充 E-->
<!--保持位置居于浏览器中心 S-->
canvas.style.position="absolute";
canvas.style.top=(document.documentElement.clientHeight-500)/2+"px";
canvas.style.left=(document.documentElement.clientWidth-500)/2+"px";
<!--保持位置居于浏览器中心 E-->
}
window.onload=window.onresize=canFun;
</script>
<!--函数 E-->
</head>
<body>
<canvas width="500" height="500" >该浏览器不支持canvas.</canvas>
</body>
</html>
效果如下面的图片:
附加:绘制五角星的不同姿势
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "green";
context.fillRect(0,0,150,150);
var r = 40;
context.translate(75,75);
context.beginPath();
context.fillStyle="yellow";
context.moveTo(r,0);
for(var i=0;i<9;i++){
context.rotate(Math.PI/5);
if(i%2 == 0) {
context.lineTo((r/0.525731)*0.200811,0);
} else {
context.lineTo(r,0);
}
}
context.closePath();
context.fill();
context.stroke();
}
<canvas id="canvas" width="150" height="150"></canvas>
画出来的效果如下图:
这个画法不熟悉canvas操作的话,上来看可能会有点懵。(其实我也是看了一会才明白)
下面分解一下这种画法:
这样的:
(1)context.translate(75,75);
将画布起点移动到了上面画的矩形的中心;
(2)context.moveTo(r,0);
设置的是五角星的起点,就是第1个点;
(3)然后进入for循环,绘制剩下的9个点。每次绘制点前,都会调用context.rotate(Math.PI/5);
函数,将画布以上面第一个步骤里移动后的点(就是矩形的中心)为中心,旋转PI/5;
然后就是两种情况了,偶数的时候,移动context.lineTo((r/0.525731)*0.200811,0);
这个距离,例如i=0的时候,就是上面图上的第2个点;
奇数的时候,移动context.lineTo(r,0);
这个距离,例如i=1的时候,就是上图的第3个点,这样画完9个点,加上起点,正好就是一个完整五角星的10个点了,关闭路径,绘制就出现图形了。
(2)五个点的画法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas7</title>
<script>
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "#eeeeef";
context.fillRect(0,0,500,500);
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = "rgba(100,100,100,0.5)";
context.shadowBlur = 3.5;
context.translate(0,50);
for(var i=0;i<3;i++){
context.translate(100,100);
create5Star(context);
context.fill();
}
}
function create5Star(context){
var dx = 100;
var dy = 0;
var s = 50;
context.beginPath();
context.fillStyle = "rgba(255,0,0,0.5)";
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI/5*4;
for(var i = 0;i<5;i++){
var x = Math.sin(i*dig);
var y = Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
效果如下图:
1 0
- Canvas——路径使用的一些感悟
- grunt使用的一些感悟
- SimpleAudioEngine使用的一些感悟
- react的一些使用感悟
- HTML5 Canvas使用路径——绘制圆形
- canvas的一些有用的使用小结
- 找工作的一些感悟——前端小菜的成长
- 找工作的一些感悟——前端小菜的成长
- 找工作的一些感悟——前端小菜的成长
- Canvas---路径的绘制
- Canvas相关的一些问题——画圆
- Android——Canvas类的使用
- 目前的一些感悟
- 接口的一些感悟
- 最近的一些感悟
- 最近的一些感悟
- 最近的一些感悟
- 一些过时的感悟
- JAVA学习之路--Tomacat安装及常见问题
- 简单的对象关联
- 机器学习笔记(一):绪论
- Android浏览图片,点击放大至全屏效果(包含点击前位置到全屏的动画)
- 第一个爬虫:爬糗事百科笑话
- Canvas——路径使用的一些感悟
- G.711编解码原理
- MongoDB simple command
- navigationBar色差解决
- 第十一周实践项目4-教师兼干部类
- Linux下GDB调试工具使用
- Java中获取文件大小的正确方法
- Android Dev Intro - Some Concepts
- Android 序列化