`
BuN_Ny
  • 浏览: 85478 次
  • 来自: 济南
社区版块
存档分类
最新评论

Canvas入门实例05:画一个衣架

阅读更多

本文综合前面的几个例子,画一个晾衣架。

function drawScreen(){
      var context = theCanvas.getContext('2d');
      context.strokeStyle = 'black';
      context.lineWidth = 5;
      context.beginPath();
      context.moveTo(150,130);
      context.lineTo(50,150);
      context.arc(50, 175, 25, 1.5*Math.PI, 0.5*Math.PI, true);
      context.moveTo(50,200);
      context.lineTo(250,200);
      context.arc(250, 175, 25, 0.5*Math.PI, 1.5*Math.PI, true);
      context.moveTo(250,150);
      context.lineTo(150,130);
      context.lineTo(150,60);
      context.lineJoin = 'round';
      context.arc(150, 40, 20, 0.5*Math.PI, Math.PI, true);
      context.stroke();
      context.closePath();
}
 

 

 

  • 大小: 3.4 KB
分享到:
评论

相关推荐

    Canvas入门实例01:猜字母

    【Canvas入门实例01:猜字母】是一个针对前端开发者的基础教程,主要介绍如何利用HTML5的Canvas元素进行图形绘制和交互。在这个实例中,我们将学习Canvas的基本用法,包括画布的设置、文本渲染以及用户事件处理。...

    canvas简单实例详解

    `drawImage(image, x, y)`可以将图像绘制到Canvas上,image可以是Image对象或另一个Canvas元素。 ```javascript var img = new Image(); img.src = 'image.jpg'; img.onload = function() { ctx.drawImage(img, 50,...

    canvas画板实例

    本实例是关于如何利用JS和Canvas API创建一个功能丰富的在线画板应用。 首先,Canvas是一个HTML5的标签,它提供了一个2D渲染上下文,允许我们直接在网页上绘制图像。在这个"canvas画板实例"中,我们可以通过...

    最佳canvas入门实例,水球,圆环

    这个“最佳canvas入门实例——水球,圆环”旨在引导初学者掌握Canvas的基本用法和技巧,通过实际操作来理解其工作原理。 首先,让我们深入了解一下Canvas。Canvas是一个基于矢量图形的画布元素,通过JavaScript来...

    HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文【PDF】

    基瑞编著的《HTML5Canvas核心技术:图形...第 9章以一个简单但是高效的游戏引擎开始,提供了游戏制作所需的全部支持功能:第10章讨论了实现自定义控件的通用方法;第11章专门讲述如何实现基于Canvas的手机应用程序。

    HTML5 Canvas核心技术源码技术代码

    Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、...

    Android 自定义画布canvas 实现绘制和清空画布功能

    在`onDraw()`方法中,系统会为我们提供一个Canvas对象,我们可以调用其方法来绘制图形。 1. **获取Canvas对象** 在`onDraw()`方法中,通过`Canvas canvas = this.getCanvas();`获取Canvas实例。这个canvas就是我们...

    android开发实例大全_王东华

    实例007: 创建一个桌面组件Widget 11 实例008: 在屏幕中实现一个按钮效果 12 实例009: 在屏幕中显示文字 13 实例010: 在屏幕中显示编辑框 17 实例011: 在屏幕中显示复选框 18 实例012: 在屏幕中显示单选框 21 ...

    HTML5 Canvas核心技术—图形、动画与游戏开发一书源代码

    HTML5 Canvas是Web开发中的一个关键技术,它提供了一个在网页上绘制图形的API,使得开发者可以直接在浏览器中创建丰富的交互式2D图形、动画以及游戏。"HTML5 Canvas核心技术—图形、动画与游戏开发"这本书深入浅出地...

    canvas小实例.rar

    `canvas`标签本身就是一个二维绘图上下文,通过JavaScript的`CanvasRenderingContext2D`对象提供的方法,我们可以进行画线、填充形状、绘制图像等操作。 在“canvas小实例”中,我们可能会遇到以下核心概念和方法:...

    简单的Canvas刮奖带动画效果的实例

    在本文中,我们将深入探讨如何使用HTML5的Canvas API实现一个简单的刮奖动画效果。...这只是一个基础的刮奖动画,实际应用中可能需要更复杂的效果和优化,但这个例子足以帮助我们入门Canvas动画的制作。

    Html5 Canvas的充分运用:实用示例

    总的来说,这篇博客应该是为初学者提供了一个逐步学习HTML5 Canvas的教程,通过实例讲解了Canvas的基本操作和应用,对于提升Web开发中的图形处理能力大有裨益。如果想深入了解,建议直接访问提供的博客链接,结合...

    Delphi6 Canvas画特效图片:颜色渐变

    说明:Delphi6 Canvas画特效图片:颜色渐变 核心技术:DelphiTColor(R,G,B:Integer):TColor; Google搜索:inttohex(,stringtocolor(,DelphiTColor(,ColortoRGB(,垂直翻转,Bitmap

    HTML5 Canvas核心技术 图形、动画与游戏开发电子书

    HTML5 Canvas核心技术 图形、动画与游戏开发

    超多经典canvas实例

    总的来说,"超多经典canvas实例"是一个极好的学习资源,它可以帮助开发者掌握Canvas的精髓,从而在网页应用开发中发挥出强大的图形表现力。无论你是初学者还是经验丰富的开发者,都可以从这些实例中获益良多。通过...

    Html5——Canvas实例(制作太阳地球月球三球联动动画)

    在这个实例中,我们将深入探讨如何利用Canvas来制作一个太阳、地球和月球三球联动的动画,这涉及到JavaScript编程以及Canvas API的使用。 首先,Canvas是一个二维绘图上下文,通过JavaScript来控制其行为。在HTML文...

    html5 canvas画布实现液体波浪动画效果

    Canvas是一个基于矢量图形的元素,通过JavaScript API来操作。在HTML中,我们可以通过`<canvas>`标签创建一个画布,然后通过JavaScript的`document.getElementById('canvas')`获取到这个元素,并使用`getContext('2d...

    HTML5 Canvas氏量图转动动画实例.rar

    这个"HTML5 Canvas氏量图转动动画实例"是一个展示如何利用Canvas API实现动态齿轮转动动画的示例。接下来,我们将深入探讨HTML5 Canvas的基础知识、齿轮图形的绘制以及如何实现动画效果。 首先,HTML5 Canvas是一个...

    html5 canvas源码实例集.rar

    html5 canvas源码实例集,是一本书的中例子,用Canvas进行图形绘制、图像控制等各方面的有关Canvas操作的实例,一共有接近20M的实例,是学习HTML5 Canvas绘图不可错过的范例集。

    canvas动画-星空效果动画

    首先,我们需要获取到`canvas`元素,然后创建一个`2D`渲染上下文,这是在Canvas上绘制的基础: ```javascript var canvas = document.getElementById('starCanvas'); var ctx = canvas.getContext('2d'); ``` 为了...

Global site tag (gtag.js) - Google Analytics