应用HTML5 Canvas绘图圆角矩形框及有关的1些运用举

日期:2020-12-11 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

圆角矩形框是由4段线条和4个1/4圆弧构成,拆解以下。

由于大家要写的是涵数而并不是1个固定不动的圆角矩形框,因此这里列出的是涵数必须的主要参数。剖析好以后,立即敲出编码。

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  5.     <title>圆角矩形框</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的访问器竟然不适用Canvas?!赶紧换1个吧!!   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         drawRoundRect(context, 200, 100, 400, 400, 50);   
  28.         context.strokeStyle = "#0078AA";   
  29.         context.stroke();   
  30.     }   
  31.   
  32.     function drawRoundRect(cxt, x, y, width, height, radius){   
  33.         cxt.beginPath();   
  34.         cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);   
  35.         cxt.lineTo(width - radius + x, y);   
  36.         cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);   
  37.         cxt.lineTo(width + x, height + y - radius);   
  38.         cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);   
  39.         cxt.lineTo(radius + x, height +y);   
  40.         cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);   
  41.         cxt.closePath();   
  42.     }   
  43. </script>   
  44. </body>   
  45. </html>  

运作結果:

提议大伙儿自身动手能力绘图1个圆角矩形框,这样有助于对相对路径的把握。

下面大家用这个涵数来做点别的的事儿。

绘图2048手机游戏页面
对编码不做过量解读,大伙儿自身科学研究科学研究,提议自身动手能力先尝试写1下。由于我这里选用的是硬编号,因此并不是很好,大伙儿也可尝试提升1下。

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  5.     <title>2048手机游戏页面</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的访问器竟然不适用Canvas?!赶紧换1个吧!!   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         drawRoundRect(context, 200, 100, 400, 400, 5);   
  28.         context.fillStyle = "#AA7B41";   
  29.         context.strokeStyle = "#0078AA";   
  30.         context.stroke();   
  31.         context.fill();   
  32.   
  33.         for(var i = 1; i <= 4; i++){   
  34.             for(var j = 1; j <= 4; j++){   
  35.                 drawRoundRect(context, 200 + 16 * i + 80 * (i - 1), 100 + 16 * j + 80 * (j - 1), 80, 80, 5);   
  36.                 context.fillStyle = "#CCBFB4";   
  37.                 context.strokeStyle = "#0078AA";   
  38.                 context.stroke();   
  39.                 context.fill();   
  40.             }   
  41.         }   
  42.     }   
  43.   
  44.     function drawRoundRect(cxt, x, y, width, height, radius){   
  45.         cxt.beginPath();   
  46.         cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);   
  47.         cxt.lineTo(width - radius + x, y);   
  48.         cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);   
  49.         cxt.lineTo(width + x, height + y - radius);   
  50.         cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);   
  51.         cxt.lineTo(radius + x, height +y);   
  52.         cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);   
  53.         cxt.closePath();   
  54.     }   
  55. </script>   
  56. </body>   
  57. </html>   
  58.   

运作結果:

这个圆角矩形框的涵数写好以后,能够自身封裝进JS文档里,之后遇到甚么好的涵数都可以以放进去,这样累积下来,这个文档便是1套属于自身的图型库和手机游戏模块了,是否十分的酷?

实际上手机游戏制做是Canvas的关键主要用途,可是要了解每个手机游戏设计方案师全是1个造型艺术家。


绘图手机微信会话框
大伙儿能够尝试着应用Canvas绘图1下手机微信闲聊页面,做为训练与推进。

这里应用到了绘图矩形框,绘图圆角矩形框,绘图多线条图型,填充色调的1些专业知识。也有1些 Canvas文字API 大家并沒有说到,因此大伙儿要是能绘图出1个大约的页面即使达标了。可以绘图出来,也就基础把握了Canvas API。

实际上上述会话是转化成出来的——“手机微信页面转化成器网页页面版”,可以说是微商神器。是否十分的酷?

这只是暑期花两天和间写的最开始版本号,还并未做到公布的程度,在我写本节的情况下,这个网页页面的页面还正在提升中。大伙儿能够尝试自身动手能力做做,还可以关心和参照我的这个小新项目github:手机微信页面转化成器。本节就已不反复得出页面编码了。

好了,学到这里基础上早已学完了全部基础的Canvas制图的api,大伙儿拿起自身的画笔,随意的充分发挥吧!