`
lib
  • 浏览: 135974 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Canvas学习笔记(六)--绘图（综合使用）

web前端html5canvas 
阅读更多

首先看看需要完成的图像：

 

代码如下：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  	<style type="text/css">
		.wraper {
			position: relative;
			border: 1px solid orange;
		}
  	</style>
	<script type="text/javascript">
		function draw(){
			var can = document.getElementById('test');
			if(can.getContext){
				var cxt = can.getContext('2d');

				//绘制左侧黑色区域
				cxt.beginPath();
				cxt.arc(100,100,80,Math.PI*0.5,Math.PI*1.5,false);
				cxt.bezierCurveTo(20,100,180,100,100,180);
				cxt.fill();

				//绘制右侧白色区域
				cxt9.beginPath();
				cxt.arc(100,100,80,Math.PI*0.5,Math.PI*1.5,true);
				cxt.stroke();

				//绘制右侧黑色圆圈
				cxt.beginPath();
				cxt.moveTo(120,60);
				cxt.arc(120,60,15,0,Math.PI*2,true);
				cxt.fill();

				//绘制左侧白色圆圈
				cxt.fillStyle = "rgba(255,255,255,1)";
				cxt.beginPath();
				cxt.moveTo(80,140);
				cxt.arc(80,140,15,0,Math.PI*2,true);
				cxt.fill();

			}
		}
	</script>
  </head>	
  
  <body onload="draw();">
	
	<canvas id="test" width="200px" height="200px" class="wraper"></canvas>

  </body>
</html>
 

 

 

 

 

  • 大小: 6 KB
分享到：
| Canvas学习笔记(五)--绘图（贝赛尔曲线）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html5中canvas学习笔记1-画板的尺寸与实际显示尺寸

    本文的学习笔记重点讲述了`canvas`元素的画板尺寸与实际显示尺寸之间的关系。 首先，我们要了解`canvas`元素的尺寸是由其`width`和`height`属性直接指定的。这些属性定义了画布的像素尺寸，也就是画布的内部分辨率...

    HTML5 Canvas学习笔记(1)处理鼠标事件

    这篇“HTML5 Canvas学习笔记(1)处理鼠标事件”着重讲解了如何利用Canvas API来监听和响应鼠标的点击、移动等事件。 Canvas API提供了几个关键的方法来处理鼠标事件，包括`addEventListener`用于绑定事件处理函数，`...

    HTML5 Canvas学习笔记(5)游戏得分动画

    这篇“HTML5 Canvas学习笔记(5)游戏得分动画”着重讲解了如何利用Canvas技术来实现游戏中的得分动画效果。通过学习这篇笔记，我们可以深入了解Canvas的基本用法以及如何将它应用于游戏开发。 首先，Canvas是HTML5的...

    HTML5 Canvas学习笔记(4)游戏界面的淡入淡出

    在本篇"HTML5 Canvas学习笔记(4)游戏界面的淡入淡出"中，我们将深入探讨如何利用Canvas来创建游戏界面的淡入淡出效果，这是一个增强用户体验的重要技巧，尤其在游戏加载、场景切换或过渡效果中。 首先，淡入淡出...

    HTML5 Canvas学习笔记(6)拼图游戏（数字版）

    在“HTML5 Canvas学习笔记(6)拼图游戏（数字版）”这篇博文中，作者分享了如何利用Canvas构建一个数字拼图游戏。下面我们将详细探讨这个知识点。 1. **HTML5 Canvas基础**： - Canvas是一个基于矢量图形的画布元素...

    HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）

    这篇“HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）”深入探讨了如何利用Canvas技术构建一个经典的游戏——俄罗斯方块。 在HTML5 Canvas上构建俄罗斯方块游戏，首先需要理解Canvas的基本结构和绘图API。...

    《HTML5 Canvas学习笔记(10)》数钱数到手抽筋

    这篇名为“HTML5 Canvas学习笔记(10) - 数钱数到手抽筋”的博客文章，很可能是讲解如何使用Canvas来模拟数钱动画或游戏的教程。在Canvas中实现这样的功能，需要掌握以下几个关键知识点： 1. **Canvas基本概念**：...

    HTML5 Canvas学习笔记(3)加载游戏/动画音乐

    在“HTML5 Canvas学习笔记(3)加载游戏/动画音乐”这个主题中，我们将深入探讨如何利用Canvas API来加载和播放音频资源，这对于创建交互式游戏和动画至关重要。 1. HTML5 Audio API HTML5提供了Audio元素，它是网页...

    HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）

    这篇“HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）”着重介绍了如何利用Canvas构建经典游戏——俄罗斯方块的基础部分，即色块的绘制与移动。 首先，我们要理解HTML5 Canvas的基本结构。它是一个二维绘图...

    dom -canvas笔记

    ### DOM Canvas 绘图知识点详解 #### 一、Canvas 基础介绍 **Canvas** 是 HTML5 ...以上是关于 DOM Canvas 绘图的基础知识点，涵盖了从获取 Canvas 元素到具体绘图命令的详细解释，希望对学习 Canvas 绘图有所帮助。

    canvas学习

    在这个“canvas学习”的压缩包中，你将找到关于canvas的基本语法和学习笔记，这对于想要掌握这个技术的前端开发者来说是非常宝贵的资源。 1. **Canvas元素** - `canvas`标签是HTML5中的一个新元素，用于在网页上...

    h5前端学习笔记

    综合以上信息，这份“h5前端学习笔记”涵盖了HTML5的基础到高级特性，CSS样式设计，JavaScript编程，以及一些实际应用场景的案例，对于想要系统学习和提升前端技能的开发者来说，是非常宝贵的资源。

    java学习细节 android学习笔记

    根据给定的信息，我们可以从Java和Android学习笔记中提取出一系列重要的知识点，下面将逐一进行详细解释。 ### Java基础知识 #### 1. 命令行基础操作 - **`javacmd`**: 这个命令是Java命令行工具的一部分，用于...

    Android画图学习笔记

    ### Android画图学习笔记知识点概览 #### 一、Android画图基础知识介绍 - **类的简介** - 在Android开发过程中，对于图形绘制的理解不仅仅局限于Google提供的官方文档，还需要深入掌握Java的基础类库，尤其是那些...

    canvas学习笔记之2d画布基础的实现

    &lt; canvas&gt; 是一个可以使用脚本（通常是js）来绘图的HTML元素 &lt; canvas&gt; 最早由Apple引入WebKit，用于Mac OS X 的 Dashboard和 Safari 如今，所有主流的浏览器都支持它（IE9+,更低版本需引入Explorer Canvas来支持） ...

    canvas学习之API整理笔记（二）

    在本文中，我们将深入探讨HTML5的canvas API，特别是高级动画、像素操作和性能优化这三个核心主题。canvas作为Web开发中的一个强大工具，...同时，持续关注和学习canvas的新特性和最佳实践，将有助于保持技术的前沿性。

    我的前端学习笔记

    这篇前端学习笔记主要涉及到HTML5和CSS3的相关知识，特别是Canvas元素的使用。Canvas是HTML5引入的一个重要特性，允许动态生成图像，非常适合用于创建图形、动画或者游戏等交互式内容。 首先，我们看到CSS部分定义...

    canvas学习笔记之绘制简单路径

    在HTML5中，Canvas元素提供了一个强大的2D绘图环境，允许开发者动态地在网页上绘制图形。本篇文章将深入探讨Canvas的绘制简单路径，包括线段、矩形和圆弧路径的创建方法。 首先，我们来看线段（直线路径）的绘制。...

    canvas的clipRect理解

    在`android学习笔记--clip.docx`文档中，可能详细阐述了`clipRect`的使用实例、与其他方法的结合使用、注意事项等内容。通过阅读这份文档，开发者可以更深入地理解`clipRect`的原理和应用场景，从而在Android开发中...

    HTML5高级程序设计学习笔记

    ### HTML5高级程序设计学习笔记 #### 一、HTML5新增结构标签 在HTML5中，为了更好地组织页面内容并增强语义性，引入了一系列新的结构标签，这些标签不仅能够帮助开发者更清晰地定义页面的不同部分，同时也为搜索...

Magicbox
Global site tag (gtag.js) - Google Analytics