Canvas 绘制矩形,圆形,不规则图形(线条),渐变等图像效果
绘制矩形:
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
#myCanvas{ border: 1px dotted #aaaaaa; padding:10px; }
</style>
</head> <body>
<canvas id="myCanvas" width="300" height="200"> </canvas>
<script>
var c = document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(10,10,150,100);
</script>
</body> </html>
绘制圆形:
创建圆形路径时需要用到对象的arc方法,方法定义如:XXX.arc(x,y,radius,startAngle,endAngle,anticlockwise)
x为圆形起点的横坐标,y为圆形起点的纵坐标,radius为圆形半径,startAngle为开始角度,endAngle为结束角度,anticlockwise是否按顺时针方向进行绘制。
XXX.beginPath() 创建路径,XXX.closePath() 结束路径,然后XXX.fill() 渲染即可。
<script>
var c = document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#ff0000";
cxt.beginPath();
cxt.arc(50,50,30,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
绘制线条形:
moveTox,y)指定从何处(x,y)开始,lineTo指定在何处结束,来绘制一条线:
然后 调用stroke()实现绘制。
<script>
var c = document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(20,20);
cxt.lineTo(40,90);
cxt.lineTo(80,70);
cxt.lineTo(130,90);
cxt.stroke();
</script>
绘制渐变效果:
使用您指定的颜色来绘制渐变背景,跟绘制普通矩形差不多,只是fillStyle的值为渐变色了而已。
线性渐变:
方法 createLinearGradient(0,0,150,100); 指定了创建线性渐变色范围
方法 grd.addColorStop(0,"#ff0000");
grd.addColorStop(1,"#00ff00"); 为渐变色指定渐变“开始与结束”
假如你想实现一个上下的线性渐变的效果,那么你应该在调用createLinearGradient(x0,y0,x1,y1) 创建渐变的时候保证点(x0,y0),点(x1,y1)连成的直线为竖直直线,也就是x0=x1。
当然你也可以实现对角线渐变的效果,只要(x0,y0) (x1,y1)组成一条对角线就可以了。
创建上下渐变和对角线渐变可以这样来:
createLinearGradient(0,0,0,300); // 创建上下渐变
createLinearGradient(10,10,300,300); // 创建对角线渐变
<script>
var c = document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd = cxt.createLinearGradient(0,0,150,100);
grd.addColorStop(0,"#ff0000");
grd.addColorStop(1,"#00ff00");
cxt.fillStyle = grd;
cxt.fillRect(0,0,150,70);
</script>
径向渐变:
createRadialGradient(x0,y0,r0,x1,y1,r1)
创建一个沿两个圆之间的锥面绘制渐变。前三个参数代表一个圆心为(x0,y0)半径为r0的开始圆,后三个参数代表圆心为(x1,y1)半径为r1的结束圆。
比如 var grd = cxt.createRadialGradient(100,100,30,100,100,70)
就创建了一个由圆心(100,100)半径为30的圆 ---》 圆心(100,100)半径为70的圆 的渐变效果。
Canvas 绘制矩形,圆形,不规则图形(线条),渐变等图像效果的更多相关文章
- canvas 绘制 矩形 圆形
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <tit ...
- h5学习-canvas绘制矩形、圆形、文字、动画
绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- canvas绘制矩形
canvas绘制矩形 方法 fillRect(x, y, width, height) 画一个实心的矩形 clearRect(x, y, width, height) 清除一块儿矩形区域 stroke ...
- canvas 绘制矩形和圆形
canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...
- html5 canvas绘制矩形和圆形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- canvas 绘制矩形
XXX(x,y,width,height) x矩形左上角x坐标 y矩形左上角y坐标 ...
- vue下canvas绘制矩形
起因:根据项目需求本人写了一个绘制矩形的组件.功能:在图片中绘制矩形,根据图片大小进行自适应展示,获取图片矩形坐标.思路:首先定义一个固定大小的DIV,DIV标签中有监测鼠标变化的四个事件moused ...
- HTML5—canvas绘制图形(1)
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
- canvas绘制简单图形
canvas绘图篇: canvas绘制矩形: <!DOCTYPE html> <html> <head lang="en"> <meta ...
随机推荐
- WebLogic 两处任意文件上传漏洞动态分析(CVE-2018-2894)
0x01 前言 CNCERT前几天发公告称发现Oracle公司出品的基于JavaEE结构的中间件WebLogic产品存在一个远程上传漏洞,并得到了厂商的确认,危害程度评分高达9.8分.鉴于厂商已进行了 ...
- WPF 降低.net framework到4.0
1. 问题背景 由于xp系统上面最高只能安装.net framework 4.0,所以公司项目需要将原来项目的.net framework版本降低到4.0,具体的降版本很简单,只要把项目属性中的目标框 ...
- 流式处理框架storm浅析(下篇)
本文来自网易云社区 作者:汪建伟 举个栗子 1 实现的目标 设计一个系统,来实现对一个文本里面的单词出现的频率进行统计. 2 设计Topology结构: 这是一个简单的例子,topology也非常简单 ...
- python中的内置函数(一), lambda, filter, map
https://www.processon.com/view/link/5c10da0ce4b099ae3e137bf6 1.内置函数 内置函数就是python中提供的,可以直接拿来用的函数,比如pr ...
- python中的函数(基础)
1.什么是函数 函数是指将一组数据的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用函数名即可 (函数就是对功能或者动作的封装) 2.函数的语法和定义 def 函数名() 函数体 调用: ...
- Nmap 扫描
最近在家里学习渗透,看到了nmap对服务器进行端口扫描,记录学习如下: Nmap支持非常多的扫描方式,包括TCP Syn ,TCP Connect,TCP ACK,TCP FIN/Xmas/NULL, ...
- sqlite3简单操作
最近在操作公司视频设备的tutk转发服务器的时候,用到的数据库是sqlite,在此复习一下 目录 1 建立数据库档案 2 在sqlite3提示列下操作 3 SQL的指令格式 4 建立资料表 5 建立索 ...
- Problem H: 小姐姐的QQ号(DFS)
Contest - 河南省多校连萌(四) Problem H: 小姐姐的QQ号 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 297 Solved: ...
- (三)SSO之CAS框架单点退出,退出到CAS登录界面
应需求的改变.CAS自定义登录页面不安全,不再使用,于是我一下子回到了原点,在linux上部署上了没有加自定义登陆界面的CAS,接下来开始修改CAS自己默认的登录界面为我们的界面. 一下子修改成功是根 ...
- 利用wxpy进行微信信息发送详解(一)
利用wxpy进行微信信息自动发送,简直是骚扰神器,除非拉黑你. 那我们就来设置一个场景吧,五秒发送一次,一次发送10条 首先我们来整理一下思路: ♦1.首先我们要从网上爬去我们想要发送的内容 ♦2.登 ...