返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例

2019-01-28 15:11:49于丽

运行结果：
2016322111413272.jpg (850×500)

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

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

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

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>    <html lang="zh">   
  2. <head>        <meta charset="UTF-8">   
  3.     <title>2048游戏界面</title>        <style>   
  4.         body { background: url("./images/bg3.jpg") repeat; }           #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  5.     </style>    </head>   
  6. <body>    <div id="canvas-warp">   
  7.     <canvas id="canvas">            你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  8.     </canvas>    </div>   
  9.    <script>   
  10.     window.onload = function(){            var canvas = document.getElementById("canvas");   
  11.         canvas.width = 800;            canvas.height = 600;   
  12.         var context = canvas.getContext("2d");            context.fillStyle = "#FFF";   
  13.         context.fillRect(0,0,800,600);      
  14.         drawRoundRect(context, 200, 100, 400, 400, 5);            context.fillStyle = "#AA7B41";   
相关文章 大家在看