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的定位页面元素
Aug 29 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 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
php获取'/'传参的值简单方法
2017/07/13 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
jQuery 1.0.2
2006/10/11 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
python异常和文件处理机制详解
2016/07/19 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
Java基础类库面试题
2013/09/04 面试题
应聘教师自荐信
2013/10/12 职场文书
中药专业大学生医药工作求职信
2013/10/25 职场文书
党员干部一句话承诺
2014/05/30 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
收银员岗位职责
2015/02/03 职场文书
个人自荐书怎么写
2015/03/26 职场文书
《观潮》教学反思
2016/02/17 职场文书
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS