【Canvas】树冠

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <canvas id=‘drawRect‘ width=‘300‘ height=‘300‘></canvas>
</body>
</html>
function darwTrails(){
  var canvas = document.getElementById(‘drawRect‘);
  var context = canvas.getContext(‘2d‘);
  context.save();
  context.translate(130,250);
  createTree(context);
  context.restore();
}

function createTree(context){
  context.beginPath();
  context.moveTo(-25,-50);
  context.lineTo(-10,-80);
  context.lineTo(-20,-80);
  context.lineTo(-5,-110);
  context.lineTo(-15,-110);
  context.lineTo(0,-140);
  context.lineTo(15,-110);
  context.lineTo(5,-110);
  context.lineTo(20,-80);
  context.lineTo(10,-80);
  context.lineTo(25,-50);
  context.lineWidth=4;
  context.lineJoin =‘round‘;
  context.strokeStyle=‘#663300‘;
  context.lineCap=‘butt‘;
  context.fillStyle=‘#339900‘;
  context.fill();
  context.closePath();
  context.stroke();  //树干

context.fillStyle=‘#663300‘;
   context.fillRect(-5,-50,10,50);

}

window.addEventListener(‘load‘,darwTrails,true);

【Canvas】树冠

时间： 2024-10-09 15:46:43

【Canvas】树冠的相关文章

HTML5程序设计 Canvas API

检测浏览器支持情况 <script type="text/javascript"> try { document.createElement("Canvas").getContext("2d"); document.getElementById("support").innerHTML = "OK"; } catch (e) { document.getElementById("sup

HTML5新增核心工具——canvas

Canvas元素称得上是HTML5的核心所在,它是一个依靠JavaScript绘制华丽图像的元素. Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度,JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形. Canvas可以在浏览器中绘制出十分华丽的图形,比如: 当然这应该算比较高级的用法了,本菜也不会=.= Canvas一个很大的作用就是制作游戏,本文通过博主之前做的一个小游戏来从零介绍Canvas的用法,先展示下吧: O

Canvas简述

HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简单. 在网页上使用canvas元素时,它会创建一块矩形区域.默认情况下该矩形区域宽为300像素,高为150像素,但也可以自定义具体的大小或者设置canvas元素的其他特性. 1 <body> 2 <div> 3 <header> 4 <h1>inde

HTML5 程序设计 - 使用HTML5 Canvas API

请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方便查看. 学习笔记,纯手工码字,有错别字什么的请指出,觉得好的请点个赞小小的支持下.谢谢亲们. 本篇,我们将探索如何使用HTML5和Canvas API.Canvas API很酷,可以通过它来动态生成和展示图形.图表.图像以及动画. 本篇将使用渲染API(Rendering API)的基本功能来创建

HTML5 Canvas （一）

1.历史 Canvas的概念最初是由苹果公司提出,用于Mac OS X WebKit中创建控制板部件(dashboard widget). 2.canvas 在页面使用canvas时,它会创建一块矩形区域.默认该矩形区域宽为300像素,高为150像素. <canvas></canvas> 3.canvas坐标 canvas坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸. 4.canvas和css canvas通过应用css来增加边框,设置内边距.外

canvas知识01

本文转自:http://www.cnblogs.com/jsdarkhorse/archive/2012/06/29/2568451.html 更多参考:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#-1 1.HTML Canvas API有两方面优势可以弥补 首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简

HTML5新增Canvas标签及对应属性、API详解（基础一）

知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签原型 <canvas width=”1000” height=”1000” id=”myCanvas”> 您的浏览器版本过低,不支持HTML5新增的canvas标签. </canvas> 使用js获取该画布,并指定对象 <script> Var canvasID = doc

移动端canvas抗锯齿

未抗锯齿效果图: 加入抗锯齿代码效果: var Game = function(){ var H = document.documentElement.clientHeight || document.body.clientHeight; var W = document.documentElement.clientWidth || document.body.clientWidth; this.canvas = document.getElementById("canvas"); t

Canvas

仿百度贴吧客户端 loading 小球 前言 几天前在简书上看到在一篇文章<Android仿百度贴吧客户端Loading小球>,看了一下作者,他写了两个好玩的 demo,效果图如下: 今天趁着周末有空,用 H5 的 Canvas 仿了一下.这篇文章只实现第一个效果图.这是我实现的效果: 实现原理 实现原理是参考简书的那篇文章,这里不再复述.现在我们来一步一步实现这样的效果. 第零步:画一个圆 源码如下: <!DOCTYPE html> <html> <head&g