首页 web前端 H5教程 使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例_html5教程技巧

使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例_html5教程技巧

May 23, 2016 pm 02:20 PM
canvas html5

圆角矩形是由四段线条和四个1/4圆弧组成,拆解如下。
2016322111336083.jpg (600×425)

因为我们要写的是函数而不是一个固定的圆角矩形,所以这里列出的是函数需要的参数。分析好之后,直接敲出代码。

JavaScript Code复制内容到剪贴板
  1. nbsp;html>   
  2. "zh">   
  3.   
  4.      "UTF-8">   
  5.     圆角矩形   
  6.     
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.        
  10.   
  11.   
  12. "canvas-warp">   
  13.     "canvas">   
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.        
  
  •   
  • <script> </script>
  •     window.onload = function(){   
  •         var canvas = document.getElementById("canvas");   
  •         canvas.width = 800;   
  •         canvas.height = 600;   
  •         var context = canvas.getContext("2d");   
  •         context.fillStyle = "#FFF";   
  •         context.fillRect(0,0,800,600);   
  •   
  •         drawRoundRect(context, 200, 100, 400, 400, 50);   
  •         context.strokeStyle = "#0078AA";   
  •         context.stroke();   
  •     }   
  •   
  •     function drawRoundRect(cxt, x, y, width, height, radius){   
  •         cxt.beginPath();   
  •         cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);   
  •         cxt.lineTo(width - radius + x, y);   
  •         cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);   
  •         cxt.lineTo(width + x, height + y - radius);   
  •         cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);   
  •         cxt.lineTo(radius + x, height +y);   
  •         cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);   
  •         cxt.closePath();   
  •     }   
  •   
  •   
  •   
  • 运行结果:
    2016322111413272.jpg (850×500)

    建议大家自己动手绘制一个圆角矩形,这样有助于对路径的掌握。

    下面我们用这个函数来做点其他的事情。

    绘制2048游戏界面
    对代码不做过多讲解,大家自己研究研究,建议自己动手先尝试写一下。因为我这里采用的是硬编码,所以不是很好,大家也可尝试优化一下。

    JavaScript Code复制内容到剪贴板
    1. nbsp;html>   
    2. "zh">   
    3.   
    4.      "UTF-8">   
    5.     2048游戏界面   
    6.     
    7.         body { background: url("./images/bg3.jpg") repeat; }  
    8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    9.        
    10.   
    11.   
    12. "canvas-warp">   
    13.     "canvas">   
    14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
    15.        
      
  •   
  • <script> </script>
  •     window.onload = function(){   
  •         var canvas = document.getElementById("canvas");   
  •         canvas.width = 800;   
  •         canvas.height = 600;   
  •         var context = canvas.getContext("2d");   
  •         context.fillStyle = "#FFF";   
  •         context.fillRect(0,0,800,600);   
  •   
  •         drawRoundRect(context, 200, 100, 400, 400, 5);   
  •         context.fillStyle = "#AA7B41";   
  •         context.strokeStyle = "#0078AA";   
  •         context.stroke();   
  •         context.fill();   
  •   
  •         for(var i = 1; i 
  •             for(var j = 1; j 
  •                 drawRoundRect(context, 200 + 16 * i + 80 * (i - 1), 100 + 16 * j + 80 * (j - 1), 80, 80, 5);   
  •                 context.fillStyle = "#CCBFB4";   
  •                 context.strokeStyle = "#0078AA";   
  •                 context.stroke();   
  •                 context.fill();   
  •             }   
  •         }   
  •     }   
  •   
  •     function drawRoundRect(cxt, x, y, width, height, radius){   
  •         cxt.beginPath();   
  •         cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);   
  •         cxt.lineTo(width - radius + x, y);   
  •         cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);   
  •         cxt.lineTo(width + x, height + y - radius);   
  •         cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);   
  •         cxt.lineTo(radius + x, height +y);   
  •         cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);   
  •         cxt.closePath();   
  •     }   
  •   
  •   
  •   
  •   
  • 运行结果:
    2016322111454844.jpg (850×500)

    这个圆角矩形的函数写好之后,可以自己封装进JS文件里,以后遇到什么好的函数都可以放进去,这样积累下来,这个文件就是一套属于自己的图形库和游戏引擎了,是不是非常的酷?

    其实游戏制作是Canvas的主要用途,但是要知道每一个游戏设计师都是一个艺术家。


    绘制微信对话框
    大家可以尝试着使用Canvas绘制一下微信聊天界面,作为练习与巩固。
    2016322111559183.jpeg (300×534)

    这里使用到了绘制矩形,绘制圆角矩形,绘制多线条图形,填充颜色的一些知识。还有一些 Canvas文本API 我们并没有说到,所以大家只要能绘制出一个大概的界面就算合格了。能够绘制出来,也就基本掌握了Canvas API。

    其实上述对话是生成出来的——“微信界面生成器网页版”,可谓是微商神器。是不是非常的酷?
    2016322111621042.jpg (850×500)

    这只是暑假花两天时间写的最初版本,还尚未达到发布的地步,在我写本节的时候,这个网页的界面还正在优化中。大家可以尝试自己动手做做,也可以关注和参考我的这个小项目github:微信界面生成器。本节就不再重复给出界面代码了。

    好了,学到这里基本上已经学完了所有基本的Canvas绘图的api,大家拿起自己的画笔,自由的发挥吧!

    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    AI Hentai Generator

    AI Hentai Generator

    免费生成ai无尽的。

    热门文章

    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    2 周前 By 尊渡假赌尊渡假赌尊渡假赌
    仓库:如何复兴队友
    4 周前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒险:如何获得巨型种子
    4 周前 By 尊渡假赌尊渡假赌尊渡假赌

    热工具

    记事本++7.3.1

    记事本++7.3.1

    好用且免费的代码编辑器

    SublimeText3汉化版

    SublimeText3汉化版

    中文版,非常好用

    禅工作室 13.0.1

    禅工作室 13.0.1

    功能强大的PHP集成开发环境

    Dreamweaver CS6

    Dreamweaver CS6

    视觉化网页开发工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

    HTML 表格边框指南。在这里,我们以 HTML 中的表格边框为例,讨论定义表格边框的多种方法。

    HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

    这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

    HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

    HTML 左边距指南。在这里,我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

    HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

    HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

    在 HTML 中移动文本 在 HTML 中移动文本 Sep 04, 2024 pm 04:45 PM

    HTML 中的文本移动指南。在这里我们讨论一下marquee标签如何使用语法和实现示例。

    HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

    HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

    HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

    HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

    HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

    HTML 输入占位符指南。在这里,我们讨论 HTML 输入占位符的示例以及代码和输出。

    See all articles