《canvas》之第12章 其他应用
《canvas》之第12章 其他应用
- 第12章 其他应用
- 12.1 canvas对象
- 12.1.1 canvas对象属性
- canvas对象方法
- 12.2 globalAlpha属性
- 12.3 globalCompositeOperation属性
- 12.4 strokeStyle和fillStyle
第12章 其他应用
12.1 canvas对象
document.getElementById()获取canvas对象。
12.1.1 canvas对象属性
width、height。
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>title><meta charset="utf-8" /><style type="text/css">body {text-align: center;}style><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");//绘制初始图形cxt.fillStyle = "#FF6699";cxt.fillRect(30, 30, 50, 50);$$("btn").onclick = function () {cxt.clearRect(0, 0, cnv.width, cnv.height);cxt.translate(10, 10);cxt.fillStyle = "#FF6699";cxt.fillRect(30, 30, 50, 50);}}script>
head>
<body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;">canvas><br /><input id="btn" type="button" value="移动" />
body>
html>
canvas对象方法
getContext(“2d”)，获取canvas 2d上下文环境对象。
toDataURL()，获取canvas对象产生的位图的字符串。
cnv.toDataURL(type);
type，可选参数，输出的MIME类型（type省略时，默认image/png）。
MIME类型，设定用一种应用程序来打开某种扩展名的文件的方式类型。
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");//定义文字var text = "绿叶学习网";cxt.font = "bold 60px 微软雅黑";//定义阴影cxt.shadowOffsetX = 5;cxt.shadowOffsetY = 5;cxt.shadowColor = "#66CCFF";cxt.shadowBlur = 10;//填充文字cxt.fillStyle = "#FF6699";cxt.fillText(text, 10, 90);$$("btn").onclick = function () {//当前页面打开url链接window.location.href = cnv.toDataURL("image/png"); }}script>
head>
<body><canvas id="canvas" width="320" height="150" style="border:1px dashed gray">canvas><br /><input id="btn" type="button" value="保存图片" />
body>
html>
点击按钮，浏览器地址产生字符串：data:image/png;base64,iV.....==
toDataURL()方法将画布保存为Base64位编码的URL，可直接嵌入网页的小型数据，如img元素的图片文件等。
data URL用处：
- 发送图片数据到web服务器的数据库，进行长期保存。
- 浏览器中直接打开，进行本地保存。
12.2 globalAlpha属性
定义canvas环境的透明度。
cxt.globalAlpha = "数值";
取值范围0.0(完全透明)~1.0(完全不透明，默认值)。
针对整个canvas，想实现局部图形或文字的透明效果，可使用RGBA。
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");cxt.globalAlpha = "0.3";cxt.font = "20px bold 微软雅黑";cxt.fillStyle = "purple";cxt.fillText("绿叶学习网", 50, 40);cxt.fillStyle = "HotPink";cxt.fillRect(50, 50, 100, 50);}script>
head>
<body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;">canvas>
body>
html>
12.3 globalCompositeOperation属性
设置交叉图形的显示方式。
cxt.globalCompositeOperation = "属性值";
| 属性值 | 说明 |
|---|---|
| source-over | 新图形覆盖旧图形重叠部分，默认值 |
| source-in | 只显示新图形重叠部分，其它部分透明处理 |
| source-out | 只显示新图形未重叠部分，其它部分透明处理 |
| source-atop | 只显示旧图形+新图形重叠部分，其它部分透明处理 |
| destination-over | 旧图形覆盖新图形重叠部分 |
| destination-in | 只显示旧图形重叠部分，其它部分透明处理 |
| destination-out | 只显示旧图形未重叠部分，其它部分透明处理 |
| destination-atop | 只显示新图形+旧图形重叠部分，其它部分透明处理 |
| copy | 只显示新图形，旧图形透明处理 |
| xor | 两种图形都显示，重叠部分透明处理 |
| darker | 两种图形都显示，重叠部分相减 |
| lighter | 两种图形都显示，重叠部分相加 |
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");//绘制矩形cxt.fillStyle = "HotPink";cxt.fillRect(30, 30, 60, 60);//绘制圆形cxt.beginPath();cxt.arc(100, 100, 40, 0, Math.PI * 2, true);cxt.closePath();cxt.globalCompositeOperation = "xor";cxt.fillStyle = "LightSkyBlue";cxt.fill();}script>
head>
<body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;">canvas>
body>
html>
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");cxt.globalCompositeOperation = "xor";//绘制第1个矩形cxt.fillStyle = "HotPink";cxt.fillRect(30, 30, 60, 60);cxt.save();cxt.globalCompositeOperation = "xor";//绘制圆形cxt.beginPath();cxt.arc(100, 100, 40, 0, Math.PI * 2, true);cxt.closePath();cxt.fillStyle = "LightSkyBlue";cxt.fill();cxt.restore();//绘制第2个矩形cxt.fillStyle = "HotPink";cxt.fillRect(110, 30, 60, 60);}script>
head>
<body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;">canvas>
body>
html>
12.4 strokeStyle和fillStyle
分别用于描边型stroke()和填充型fill()。
- 矩形
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");cxt.strokeStyle = "HotPink";cxt.strokeRect(20, 20, 50, 50);cxt.fillStyle = "LightSkyBlue";cxt.fillRect(100, 20, 50, 50);}script>
head>
<body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;">canvas>
body>
html>
- 圆形
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");cxt.beginPath();cxt.arc(50, 50, 25, 0, 360 * Math.PI / 180, false);cxt.closePath();cxt.strokeStyle = "HotPink";cxt.stroke();cxt.beginPath();cxt.arc(150, 50, 25, 0, 360 * Math.PI / 180, false);cxt.closePath();cxt.fillStyle = "LightSkyBlue";cxt.fill();}script>
head>
<body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;">canvas>
body>
html>
- 文字
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var text = "绿叶学习网";cxt.font = "bold 25px 微软雅黑";cxt.strokeStyle = "purple";cxt.strokeText(text, 30, 50);cxt.fillStyle = "purple";cxt.fillText(text, 30, 100);}script>
head>
<body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;">canvas>
body>
html>
- 图片
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");//创建image对象var image = new Image();image.src = "princess.png";image.onload = function () {var text = "绿叶学习网";cxt.font = "bold 22px 微软雅黑";var pattern = cxt.createPattern(image, "no-repeat");cxt.fillStyle = pattern;cxt.fillText(text, 10, 50);}}script>
head>
<body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;">canvas>
body>
html>
- princess.png
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！