关于HTML5画布canvas的功能
一、画布的使用
1、首先创建一个画布(canvas)
<canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid #000000”></canvas>
2、使用JavaScript来绘制图像
<script>
Var c=document.getElementByID(“myCanvas”)//得到画布
Var ctx=c.getContext(“2d”);//得到画笔
Cxt.fillStyle=”#FF0000”;//填充颜色
Cxt.fillRect(0,0,150,75);//规定顶点
</script>
3、Canvas - 路径
- moveTo(x,y) 定义线条开始坐标
- lineTo(x,y) 定义线条结束坐标
二、画图举例
1、画直线:
定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
2、画圆
使用 arc() 方法 绘制一个圆:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
3、画文本
使用 canvas 绘制文本,重要的属性和方法如下:
- font - 定义字体
- fillText(text,x,y) - 在 canvas 上绘制实心的文本
- strokeText(text,x,y) - 在 canvas 上绘制空心的文本
(1)、使用 fillText(),使用 "Arial" 字体在画布上绘制一个高 30px 的文字(实心):
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
(2)、使用 strokeText(),使用 "Arial" 字体在画布上绘制一个高 30px 的文字(空心):
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
4、渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变:
- createLinearGradient(x,y,x1,y1)
- 创建线条渐变 - createRadialGradient(x,y,r,x1,y1,r1)
- 创建一个径向/圆渐变
当我们使用渐变对象,必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.
使用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线
(1)、使用
createLinearGradient(),创建一个线性渐变。使用渐变填充矩形:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);//规定渐变的起始坐标
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
(2)、使用
createRadialGradient(),创建一个径向/圆渐变。使用渐变填充矩形:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
5、Canvas - 图像
把一幅图像放置到画布上, 使用以下方法:
- drawImage(image,x,y)
var
c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var
img=document.getElementById("scream");//得到id为scream的image,并定义为变量img
ctx.drawImage(img,10,10);//以画布坐标(10,10)为开始,将图片放置画布上。
关于HTML5画布canvas的功能的更多相关文章
- HTML5画布(CANVAS)速查简表
HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/
- HTML5 画布canvas元素
HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...
- HTML5画布Canvas
一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...
- 10款面向HTML5 画布(Canvas)的JavaScript库
https://www-evget-com/article/2014/4/9/20799.html
- HTML5 画布canvas
SVG的<defs> <symbols> 元素用于预定义一个元素使其能够在SVG图像中重复使用 <svg xmlns="http://www.w3.org/20 ...
- 转载:将画布(canvas)图像保存成本地图片的方法
之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式,方法十分简单.但后来我发现只将canvas内容转变成图片输出还不够,如何能将转变后的图片保存到本地呢? 其实,这个方法也是非常简单 ...
- 面向画布(Canvas)的JavaScript库
面向画布(Canvas)的JavaScript库 总结 每个库各有特色,根据需求选择 学习要点 面向画布(Canvas)的JavaScript库 EaselJS 是一个封装了 HTML5 画布(C ...
- 浅尝HTML5之canvas
转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和 ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
随机推荐
- 《机器学习实战》学习笔记第十三章 —— 利用PCA来简化数据
相关博文: 吴恩达机器学习笔记(八) —— 降维与主成分分析法(PCA) 主成分分析(PCA)的推导与解释 主要内容: 一.向量內积的几何意义 二.基的变换 三.协方差矩阵 四.PCA求解 一.向量內 ...
- 【LeetCode】两个有序数组合成一个有序数组
a = [1,3,5,7,9]b = [2,4,6,8,10]c= [] while len(a) > 0: if len(b) == 0: c.extend(a) break min_num ...
- 用gdisk调整gpt/ext4分区大小
主机: CentOS release 6.4 (Final) 目的:从/home分区分出100G来创建新分区/vm 参考: http://ryanclouser.com/?p=66 http://fa ...
- 反向ssh
参考 https://www.thegeekstuff.com/2013/11/reverse-ssh-tunnel/ https://www.howtoforge.com/reverse-ssh-t ...
- Nginx均衡负载配置
前言:Nginx也是一种服务器,反向代理服务器.单一tomcat能承受的并发访问量在150-200之间,还是在比较理想的情况下,当并发量超出这个范围,便需要Nginx实现多个tomcat的均衡负载,但 ...
- OpenCV——PS 滤镜算法之平面坐标到极坐标的变换
// define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...
- 「JLOI2011」「LuoguP4568」飞行路线(分层图最短路
题目描述 Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在nn个城市设有业务,设这些城市分别标记为00到n-1n−1,一共有mm种航线,每种航线连接两个城市,并且 ...
- WC2017 冬眠记
2017年2月3日,为期7天的冬眠营冬令营正式开幕. 前4天我们见到了各种集训队dalao们的华丽身姿 感受到了听课听不懂睡觉又惭愧的无力感 见到了几百号人近一半玩手机,剩下的一半有一半在睡觉,再剩下 ...
- 【Lintcode】076.Longest Increasing Subsequence
题目: Given a sequence of integers, find the longest increasing subsequence (LIS). You code should ret ...
- js实现股票实时刷新数据
近来学习炒股,免不了上班时间看盘,总不能光明正大的用电脑看行情,一直盯着手机影响也不好,容易引起“关注”. 所以就想自己做一个网页来达到看盘的目的,一个只显示几个关键数字的网页肯定不会引起怀疑.有想法 ...