html5 canvas绘制矩形和圆形的实例代码


Posted in HTML / CSS onJune 16, 2016

html5 canvas绘制矩形和圆形的实例代码

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3.     <head>   
  4.         <meta charset="UTF-8">   
  5.         <title></title>   
  6.     </head>   
  7.     <body onload="draw(),drawarc()">   
  8.         <!--绘制的步骤:获取canvas元素->取得上下文->填充与绘制边框->设定绘图样式-->   
  9.         <!--绘制其他复杂图形需要使用路径:开始创建路径->创建图形路径->关闭路径->绘制图形-->   
  10.         <!--eg:绘制矩形-->   
  11.         绘制矩形:<canvas id="ca"></canvas><br />   
  12.         绘制圆形:<canvas id="yuan"></canvas>   
  13.     </body>   
  14. </html>   
  15. <script>   
  16.     //绘制矩形   
  17.     function draw(){   
  18.         var canvas=document.getElementById('ca'); //获取canvas元素   
  19.         if (canvas==null)   
  20.            return false;   
  21.         var context=canvas.getContext('2d'); //取得上下文   
  22.         context.fillStyle='#EEEFF';   //填充颜色   
  23.         context.fillRect(0,0,400,300); //填充矩形 (矩形1)   
  24.         context.fillStyle='red';   
  25.         context.strokeStyle='blue'//边框颜色   
  26.         context.lineWidth=1;        //边框宽度   
  27.         context.fillRect(50,50,100,100); //填充矩形(内部矩形2)   
  28.         context.strokeRect(50,50,100,100); //绘制边框   
  29.            
  30.     }   
  31.     //绘制圆形   
  32.    function drawarc(){   
  33.     var canvas2=document.getElementById('yuan'); //获取canvas元素   
  34.         if (canvas2==null)   
  35.     if(canvas2==null)   
  36.        return false;   
  37.        var context2=canvas2.getContext('2d');  //取得上下文   
  38.        context2.fillStyle='#EEEEEF';   
  39.        context2.fillRect(0,0,400,300);   
  40.        var n=0;   
  41.        for(var i=0;i<10;i++){   
  42.               context2.beginPath();  //开始创建路径   
  43.               context2.arc(i*25,i*25,i*10,0,Math.PI*2,true);  //创建圆形路径   
  44.               context2.closePath();  //关闭路径   
  45.               context2.fillStyle='Rgba(255,0,0,0.25)'//设置颜色   
  46.               context2.fill();  //填充图形   
  47.        }   
  48. }   
  49.        
  50.        
  51. </script>  

以上就是小编为大家带来的html5 canvas绘制矩形和圆形的实例代码的全部内容了,希望大家多多支持脚步之家。

HTML / CSS 相关文章推荐
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
浅谈html5增强的页面元素
Jun 14 #HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 #HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 #HTML / CSS
HTML5通用接口详解
Jun 12 #HTML / CSS
html5表单及新增的改良元素详解
Jun 07 #HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 #HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 #HTML / CSS
You might like
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
Python中的exec、eval使用实例
2014/09/23 Python
python实现图片处理和特征提取详解
2017/11/13 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
酒店保洁主管岗位职责
2013/11/28 职场文书
学校卫生检查制度
2014/02/03 职场文书
和睦家庭事迹
2014/05/14 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
创业计划书之校园超市
2019/09/12 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL