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 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
CSS3实现头像旋转效果
Mar 13 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 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递归算法和应用方法介绍
2013/04/15 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
php表单提交实例讲解
2015/11/12 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
跟老齐学Python之for循环语句
2014/10/02 Python
Python简明入门教程
2015/08/04 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
如何基于Python创建目录文件夹
2019/12/31 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
python实现TCP文件传输
2020/03/20 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
介绍一下grep命令的使用
2015/06/12 面试题
财务出纳员岗位职责
2013/11/26 职场文书
车工岗位职责
2013/11/26 职场文书
个人简历自荐信
2013/12/05 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书