当前位置：网站首页>《canvas》之第12章其他应用

《canvas》之第12章其他应用

2022-06-29 13:55:00 【yxqq378287007】

《canvas》之第12章其他应用

第12章其他应用

第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>