• 售前

  • 售后

热门帖子
入门百科

HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的题目

[复制链接]
JDLMDJIA 显示全部楼层 发表于 2021-10-25 19:18:18 |阅读模式 打印 上一主题 下一主题
初识canvas元素HTML5新增了一个元素canvas,用于画图利用,其实它的体现和div比力靠近(其实他应该属于inline-block),而提供了很多接口,从而轻易的绘制矩形框、园三角形等
PS:关于HTML5新增元素
  1. 经过最近两天的学习,和以前对HTML5的认知,我认为HTML5其实还是HTML4,两者之间没多大的区别,无非是增加了点新东西。<br />我认为HTML5为我们带来的真正意义是:我们可以用javascript做更多的事情了;我们可以用javascript实现更好的产品了。比如HTML5就解决了我们头疼的跨域问题、实时通信API、与现在的canvas之所以HTML5叫HTML5,我认为他是划时代的,比如他让我们用网页开发游戏变成可能;比如他让电脑桌面只剩IE不在是传说(过于夸张)
复制代码
绘制矩形框直入正题,我们来绘制一个矩形框看看,这里提供一个颜色选择器用于方便的选择颜色,PS:如今不消jquery编程感觉真贫苦。。。
标题:界说样式与界说height与width 一来就碰到了标题,我这里先来截个图:

复制代码代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function draw() {
            //获取canvas对象
            var canvas =  document.getElementById('canvas');
            if (canvas == null) {
                return false;
            }
            var context = canvas.getContext('2d');
            context.fillStyle = '#99d9ea';
            context.fillRect(0, 0, 300, 200); //填充画布竣事
  
            context.strokeStyle = 'red';
            context.fillStyle = 'gray';
            context.lineWidth = 1;
            context.fillRect(10, 10, 100, 100);
            context.strokeRect(10, 10, 100, 100);
  
            context.clearRect(20, 20, 20, 20);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width=300 height="200" style="border: 1px solid black; width: 300px; height: 200px;">
    </canvas>
   

    <button >
        绘制矩形</button>
    <input type="color" />
</body>
</html>


  各位环境canvas元素,图一位设置width与height的环境,图二十用style指定的环境:

可以看到,对于canvas来说,照旧老诚实实界说高宽的好,别去傻乎乎的用样式了,当然这个标题必要实际研究才华得出最闭幕论。
好了,如今我们再来看看绘制矩形这个方法:
  1. PS:其实,使用该方法这么麻烦,完全可以将该函数封装下下,使用便会简单许多
复制代码
  1. 1、使用getElementById方法获取绘制对象2、取得上下文getContext('2d'),这都是固定的写法3、指定填充的颜色fillStyle和绘制的颜色strokeStyle,即里面的颜色和边框的颜色4、指定线宽linewidth5、填充/绘制 fillRect/strokeRect 参数为 x,y,width,height6、若是要使其中一块透明,使用clearRect
复制代码
至此,绘制矩形框便临时告一段落。
绘制圆形
如今我们来绘制圆形,这个提及绘制圆形,其实我原来用js好像写过一个,这里也贴出来看看:

复制代码代码如下:
我是纯js画的圆
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title></title>
     <style type="text/css">
         div
         {
             position: absolute;
             width: 1px;
             height: 1px;
             line-height: 1px;
         }
     </style>
     <script src="http://www.cnblogs.com/jquery-1.7.1.js" type="text/javascript"></script>
     <script type="text/javascript">
         //x2 + y2 = r2;
         $(document).ready(function () {
             //先画x,y
             var box = $('#box');
             var NUM = 200;
             var R = NUM / 2;
             var RR = R * R;
             for (var i = 0; i <= NUM; i = i + 6) {
                 //var divX = $('<div style="left:' + i + 'px;top:' + R + 'px;">*</div>')
                 // var divY = $('<div style="top:' + i + 'px;left:' + R + 'px;">*</div>')

                 var ti = i;
                 //sqrt(x)
                 if (ti > R) {
                     ti = ti - R;
                     var ty = Math.sqrt((RR - ti * ti));
                     var y = $('<div style="left:' + (R - ty) + 'px;top:' + i + 'px;">*</div>')
                     var y1 = $('<div style="left:' + (R + ty) + 'px;top:' + i + 'px;">*</div>')
                     box.append(y);
                     box.append(y1);
                 } else if (ti < R) {
                     ti = R - ti;
                     var ty = Math.sqrt((RR - ti * ti));
                     var y = $('<div style="left:' + (R - ty) + 'px;top:' + i + 'px;">*</div>')
                     var y1 = $('<div style="left:' + (R + ty) + 'px;top:' + i + 'px;">*</div>')
                     box.append(y);
                     box.append(y1);
                 }
                 //box.append(divX);
                 //box.append(divY);
             }

             for (var i = 0; i <= NUM; i = i + 6) {
                 //var divX = $('<div style="left:' + i + 'px;top:' + R + 'px;">*</div>')
                 // var divY = $('<div style="top:' + i + 'px;left:' + R + 'px;">*</div>')
                 var ti = i;
                 //sqrt(x)
                 if (ti > R) {
                     ti = ti - R;
                     var ty = Math.sqrt((RR - ti * ti));
                     var y = $('<div style="top:' + (R - ty) + 'px;left:' + i + 'px;">*</div>')
                     var y1 = $('<div style="top:' + (R + ty) + 'px;left:' + i + 'px;">*</div>')
                     box.append(y);
                     box.append(y1);
                 } else if (ti < R) {
                     ti = R - ti;
                     var ty = Math.sqrt((RR - ti * ti));
                     var y = $('<div style="top:' + (R - ty) + 'px;left:' + i + 'px;">*</div>')
                     var y1 = $('<div style="top:' + (R + ty) + 'px;left:' + i + 'px;">*</div>')
                     box.append(y);
                     box.append(y1);
                 }
             }
         });
     
     </script>
</head>
<body>
     <div id="box" style="width: 504px; height: 504px; position: relative; top: 20px;
         left: 300px; border: 0px solid black;">
     </div>
</body>
</html>



话说,他照旧比力圆的说。。。
进入正题
提及画圆、正弦图等肯定会颠末一定计算的,所以稍稍复杂点:
① 创建路径
② 创建图形路径
③ 路径创建完成后关闭路径
④ 设定绘制样式调用方法绘制之

复制代码代码如下:
我是一个圆
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title></title>
     <script type="text/javascript">
         function draw() {
             //获取canvas对象
             var canvas = document.getElementById('canvas');
             if (canvas == null) {
                 return false;
             }
             var context = canvas.getContext('2d');
             context.fillStyle = '#99d9ea';
             context.fillRect(0, 0, 300, 200); //填充画布竣事
             for (var i = 0; i < 5; i++) {
                 context.beginPath();
                 context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
                 context.closePath();
                 context.strokeStyle = 'red';
                 context.fill();
             }
         }
     </script>
</head>
<body>
     <canvas id="canvas" width="300" height="200" >
     </canvas>
     
     <button >
         绘制圆</button>
     <input type="color" />
</body>
</html>



我们来看看绘制圆过程中别的地方都没有标题,但是创建圆路径这块值得思量:
  1. arc方法参数很多,依次是:xy半径开始弧度(我们一般喜欢角度,所以要转换)结束弧度顺时针或者逆时针true为顺时针<br />其它都好说,主要这个开始角度和结束角度我们来研究下,因为开始我没搞懂,但后来我发现他其实很简单了。。。就是开始的角度和结束的角度嘛,和我们高中学的知识一样的,只不过单位换算Math.PI/180为一度。。。。<br />反正还是没说清楚,对了,记得我们高中画圆的除了圆规和一个计量三角形角度的半圆直尺了吗,我要说的角度就是那个。。。太坑爹了!<br />好像最右边是0度,垂直是90度,水平是180度,既然如此,我们再来看看<br /><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /> 正时针逆时针 <br /> <!DOCTYPE html><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br />     <title></title><br />     <script type="text/javascript"><br />         function draw() {<br />             //获取canvas对象<br />             var canvas = document.getElementById('canvas');<br />             if (canvas == null) {<br />                 return false;<br />             }<br />             var context = canvas.getContext('2d');<br />             context.fillStyle = '#99d9ea';<br />             context.fillRect(0, 0, 400, 300); //填充画布结束<br /> <br />             context.beginPath();<br />             context.arc(80, 80, 50, 0, 180 * Math.PI / 180, true);<br />             context.closePath();<br />             context.fillStyle = 'gray';<br />             context.fill();<br /> <br />             context.beginPath();<br />             context.arc(180, 180, 50, 0, 180 * Math.PI / 180, false);<br />             context.closePath();<br />             context.fillStyle = 'gray';<br />             context.fill();<br /> <br /> <br />         }<br />     </script><br /> </head><br /> <body><br />     <canvas id="canvas" width="400" height="300"><br />     </canvas><br />     <br />     <button onclick="draw();"><br />         绘制圆</button><br />     <input type="color" /><br /> </body><br /> </html><br /> <br /><p><img alt="" src="https://img.jbzj.com/file_images/article/201304/2013042416135933.jpg" /></p><p>我们发现正时针与逆时针还是有所不同的,</p>[code] context.arc(180, 180, 50, 90 * Math.PI / 180, 290 * Math.PI / 180, true);
复制代码
包涵我这里居然思考了半个小时,我乃至搜刮了高中的资料。。。。

于是我好像明确了点什么。。。。。。
moveTo与lineTo现上实验效果:

复制代码代码如下:
两次moveto
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title></title>
     <script type="text/javascript">
         function draw() {
             //获取canvas对象
             var canvas = document.getElementById('canvas');
             if (canvas == null) {
                 return false;
             }
             var context = canvas.getContext('2d');
             context.fillStyle = '#99d9ea';
             context.fillRect(0, 0, 300, 200); //填充画布竣事

             context.beginPath();
             context.fillStyle = 'gray';
             context.strokeStyle = 'black';

             context.moveTo(10, 10);
             context.lineTo(150, 150);

             context.moveTo(10, 10);
             context.lineTo(10, 150);

             context.closePath();
             context.fill();
             context.stroke();

         }
     </script>
</head>
<body>
     <canvas id="canvas" width="300" height="200">
     </canvas>
     
     <button >
         绘制</button>
     <input type="color" />
</body>
</html>


复制代码代码如下:
一次moveto
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title></title>
     <script type="text/javascript">
         function draw() {
             //获取canvas对象
             var canvas = document.getElementById('canvas');
             if (canvas == null) {
                 return false;
             }
             var context = canvas.getContext('2d');
             context.fillStyle = '#99d9ea';
             context.fillRect(0, 0, 300, 200); //填充画布竣事

             context.beginPath();
             context.fillStyle = 'gray';
             context.strokeStyle = 'black';

             context.moveTo(10, 10);
             context.lineTo(150, 150);

//            context.moveTo(10, 10);
             context.lineTo(10, 150);

             context.closePath();
             context.fill();
             context.stroke();

         }
     </script>
</head>
<body>
     <canvas id="canvas" width="300" height="200">
     </canvas>
     
     <button >
         绘制</button>
     <input type="color" />
</body>
</html>


复制代码代码如下:
三次moveto
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title></title>
     <script type="text/javascript">
         function draw() {
             //获取canvas对象
             var canvas = document.getElementById('canvas');
             if (canvas == null) {
                 return false;
             }
             var context = canvas.getContext('2d');
             context.fillStyle = '#99d9ea';
             context.fillRect(0, 0, 300, 200); //填充画布竣事

             context.beginPath();
             context.fillStyle = 'gray';
             context.strokeStyle = 'black';

             context.moveTo(10, 10);
             context.lineTo(150, 150);

             context.moveTo(10, 10);
             context.lineTo(10, 150);

             context.moveTo(10, 150);
             context.lineTo(150, 150);

             context.closePath();
             context.fill();
             context.stroke();

         }
     </script>
</head>
<body>
     <canvas id="canvas" width="300" height="200">
     </canvas>
     
     <button >
         绘制</button>
     <input type="color" />
</body>
</html>


以上代码险些一样,但是他产生的效果却不同:
  1. 我认为,使用moveto后相当于新开一起点,之前的一笔勾销,若是只使用lineto的话,他会将几个点连成线,若是可以组成图形便会拥有中间色彩
复制代码
[/code]

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作