canvas绘制Z

先贴代码吧:

 /**
* Created by Administrator on 2016/1/26.
*/
var i;
function draw (id){
var canvas = document.getElementById(id);
context = canvas.getContext('2d');
setInterval(painting,10);
i=0;
}
function painting(){
context.fillStyle = "red" ;
context.fillRect(i+10,0,10,10);
context.fillRect(400-i,i,10,10);
context.fillRect(i+10,390,10,10);
i++;
}

这里值得一提的是setInterval方法。

格式:

  setInterval(code,millisec[,"lang"])
  code:调用的代码段,即调用的函数。
  millisec:周期性执行或调用 code 之间的时间间隔,以毫秒计。
  作用:用于绘图。 canvas屏幕框
代码:
 /**
* Created by Administrator on 2016/1/26.
*/
var i;
function draw (id){
var canvas = document.getElementById(id);
context = canvas.getContext('2d');
setInterval(painting,10);
i=0;
}
function painting(){
context.fillStyle = "red";
context.fillRect(0,0,200,200);
context.fillStyle = "white";
context.clearRect(20,20,50,50);
}

这里有clearRect方法。

格式:

  clearRect(x,y,width,heigth)

  属性不解释。

  作用:用于擦除。

 

canvas绘制中的API的更多相关文章

  1. Canvas学习:封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  2. canvas 绘点图

    canvas 绘点图 项目中需要一个记录点实时变动的信息,在此记录一下: <!DOCTYPE html> <html lang="en"> <head ...

  3. 第166天:canvas绘制饼状图动画

    canvas绘制饼状图动画 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  4. 图形绘制中的PorterDuffXfermode

    1.概述 在android图形渲染中 会使用到图像混合模式 <span style="font-size:18px;">setXfermode(Xfermode xfe ...

  5. canvas绘制饼型图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. [canvas]用canvas绘制饼状图

    折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. HTML5 Canvas绘文本动画(使用CSS自定义字体)

    一.HTML代码: <!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas De ...

  8. canvas 绘圆加边框

    HTML5中canvas元素,绘制圆形需要使用路径,开始时要取得图形上下文,首先使用路径来勾勒图形的轮廓,然后设置颜色,进行绘制. arc(cx,cy,radius,start_angle,end_a ...

  9. 使用canvas绘制饼状图

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. 图片的另一种展现—将后台图片编码直接展现为图片

    1.应用场景            开发过程中,遇到这样的需求:需要将服务器上的图片展现在页面上,但是图片所在服务器不是对外的,图片所在服务器与应用服务器也不在同一台机器上,这时候就需要在开发中先将图 ...

  2. centos iscsi 配置

    首先是服务器的设置:[root@localhost 桌面]# yum install scsi-target-*  -y     安装服务  配置yum的方法太简单了,我就不写了[root@local ...

  3. javaMail发送邮件实例

    背景:最近项目里有个实时发送邮件的功能,今天闲下来整理 一下,记录下来方便以后直接使用. 代码: package com.dzf.utils; import java.io.File; import ...

  4. how to use composer in fiddler

    https://www.cnblogs.com/youxin/p/3570310.html http://docs.telerik.com/fiddler/generate-traffic/tasks ...

  5. Flume之核心架构深入解析

    我们一起来了解Source.Channel和Sink的全链路过程. 一.Flume架构分析 这个图中核心的组件是: Source,ChannelProcessor,Channel,Sink.他们的关系 ...

  6. mysqldump 用法汇总

    mysql mysqldump 只导出表结构 不导出数据 复制代码代码如下: mysqldump --opt -d 数据库名 -u root -p > xxx.sql  备份数据库  复制代码代 ...

  7. Codeforces Round #273 (Div. 2) D. Red-Green Towers 背包dp

    D. Red-Green Towers time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  8. Http协议与生命周期

    一.Http知识:    1.基于socket        浏览器(格式一)        web服务器(格式一)        MYSQL客户端(格式二)        MYSQL服务端(格式三) ...

  9. 自动化收集SQLSERVER诊断信息

      自动化收集SQLSERVER诊断信息 相信很多人都遇到过当SQLSERVER出现问题的时候,而你又解决不了需要DBA或者微软售后支持工程师 去帮忙解决问题,那么他们一般需要你收集一些系统信息和SQ ...

  10. 自己动手写一个U盘拷贝小工具

    这是五一期间,参照知乎上一篇的文章<十行代码--用python写一个USB病毒>写成的,最初只是单纯的想写成死循环,直到文件占满硬盘为止,第一个遇到的问题是,拷贝到硬盘之后,由于要无限次拷 ...