Html5：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Rectangle</title>
  6. <style>
  7. body{
  8. background:#dddddd;
  9. }
  10. #canvas{
  11. background:#eeeeee;
  12. border:1px solid #000000;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <canvas id="canvas" width="600" height="400">
  18. Canvas not supported
  19. </canvas>
  20. <script src="rectangle.js"></script>
  21. </body>
  22. </html>

javascript:

  1. // JavaScript Document
  2. var canvas=document.getElementById('canvas'),
  3. context=canvas.getContext('2d');
  4. context.lineJoin='round';
  5. context.lineWidth=30;
  6. context.font='24px Helvetica';
  7. context.fillText('Click anywhere to erase',175,40);
  8. context.strokeRect(75,100,200,200);
  9. context.fillRect(325,100,200,200);
  10. context.canvas.onmousedown=function(e){
  11. context.clearRect(0,0,canvas.width,canvas.height);
  12. };

js代码的大概结构为：

　　1. 使用document.getElementById()方法来获取指向canvas的引用。

　　2. 在canvas对象上调用getContext('2d')方法，获取绘图环境变量。

　　3. 然后通过绘图环境对象在canvas元素上进行绘制。

代码的前两行基本上是固定的。

　　lineJoin: 当两条线交汇时创建边角类型。

　　属性值：beval（斜角），round（圆角），miter（尖角，默认）。

　　lineWidth: 设置线条宽度，默认为1。

　　fillText(): 参数（按顺序）：要输出的文本，x坐标，y坐标，允许的最大文本宽度。

　　strokeRect(): 参数：x坐标，y坐标，宽度，高度。作用：为矩形描边，用strokeStyle, lineWidth, lineJoin, MiterLimit属性。

　　fillRect(): 参数同上。作用：填充矩形，用fillStyle属性。

　　clearRect(): 参数同上。将矩形与当前剪辑区域相交范围内的所有像素清除。

<html5 canvas>一个简单的矩形的更多相关文章

  1. Html5 Canvas一个简单的画笔例子

    相比了下Qt quick的canvas和HTML5的canvas,发现HTML5 Canvas在同样绘制绘制操作下性能比Qt的canvas强很多,附上一个HTML5 canvas画笔一例子 var D ...

  2. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  3. html5 canvas 实现简单的画图

    今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js  , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...

  4. [HTML5] Canvas绘制简单形状

    使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画 获取canvas对象,调用document.getElementById()方法 调用canvas对象 ...

  5. HTML5<canvas>标签:简单介绍(0)

    <canvas> 标签是 HTML 5 中的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件, 其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与c ...

  6. 学习HTML5, Canvas及简单动画的使用

    通过在CSDN中的一些简单课程学习,跟随老师联系,做了如下的月亮,太阳和地球的运动效果.纪录在文章中,用于下次使用. 准备工作如下: 1. 使用三张背景图片 太阳 月亮 地球 2. 在HTML页面中定 ...

  7. [HTML5] Canvas绘制简单图片

    获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象的onload方法,调用context对象的drawImage()方法,参数:Image对象,x坐标, ...

  8. canvas一个简单粗暴的中奖转盘

    最近在学canvas做动画,于是就写个转盘练下手.上个简陋的成果图(中间那个是转的指针,外面的圈是图片,懒得写了哈哈哈) 代码很简单,都注释了,直接上代码吧,嘤嘤嘤 html <body> ...

  9. html5 canvas 一个漫天飞雪的效果

    很棒的下雪效果 代码奉上 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

随机推荐

  1. Java编程中中文乱码问题的研究及解决方案

    0 引言 Java最大的特性是与平台的无关性及开发环境的多样性.字符串被Java应用程序转化之前,是根据操作系统默认的编码方式编码.Java语言内部采用Unicode编码,它是定长双字节编码,即任何符 ...

  2. python socket客户端

    #./usr/bin/env python#coding:utf-8import socket#.....ip...print ('server start...')ip_port = ('144.3 ...

  3. 关于小程序后台post不到数据的问题

    小程序post请求获取不到数据问题 把headers的参数“Content-Type”的值改为application/x-www-form-urlencoded: Request Body Type ...

  4. 在浏览器地址栏按回车、F5、ctrl+F5刷新页面的区别

    url地址栏里敲击enter:这样的刷新,大家可以在firebug里看一下,只有少数的请求会发送出去,而且几乎没有图片的请求,这是因为请求时会先检查本地是不是缓存了请求的图片,如果有缓存而且没有过期( ...

  5. Oracle添加自增长字段方法步骤

    第一步:创建自增长序列 CREATE SEQUENCE ZH_ALARM_INFO_SEQ--自动增长列 INCREMENT BY 1 -- 每次加几个 START WITH 1 -- 从1开始计数 ...

  6. pta 编程题6 树的同构

    其它pta数据结构编程题请参见:pta 题目请参见:树的同构 因题目中左右子树是按照下标给出,因此用数组存放树是更好的方法. 判断两棵树是否同构:用递归的方法.如果当前两个结点都为空,则返回TRUE: ...

  7. linux 命令——56 ss(转）

    ss是Socket Statistics的缩写.顾名思义,ss命令可以用来获取socket统计信息,它可以显示和netstat类似的内容.但ss的优势在于它能够显示更多更详细的有关TCP和连接状态的信 ...

  8. linux 命令——6 rmdir(转）

    今天学习一下linux中命令: rmdir命令.rmdir是常用的命令,该命令的功能是删除空目录,一个目录被删除之前必须是空的.(注意,rm - r dir命令可代替rmdir,但是有很大危险性.)删 ...

  9. 【挖坑】2019年JAVA安全总结：SQL注入——新项目的开发与老项目的修复

    如何在项目中有效的防止SQL注入 写给需要的人,所有的问题源自我们的不重视. 本章略过"什么是SQL注入","如何去利用SQL注入"的讲解,仅讲如何去防御 PS ...

  10. IOS 监听slider滑动

    // 监听slider滑动 - (IBAction)valueChnage:(UISlider *)sender; @property (weak, nonatomic) IBOutlet NJVie ...