canvas绘制中的API

canvas绘制Z

先贴代码吧:

 1 /**
 2  * Created by Administrator on 2016/1/26.
 3  */
 4 var i;
 5 function draw (id){
 6     var canvas = document.getElementById(id);
 7     context = canvas.getContext(‘2d‘);
 8     setInterval(painting,10);
 9     i=0;
10 }
11 function painting(){
12     context.fillStyle = "red" ;
13     context.fillRect(i+10,0,10,10);
14     context.fillRect(400-i,i,10,10);
15     context.fillRect(i+10,390,10,10);
16     i++;
17 }

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

格式:

  setInterval(code,millisec[,"lang"])  code:调用的代码段,即调用的函数。  millisec:周期性执行或调用 code 之间的时间间隔,以毫秒计。  作用:用于绘图。

canvas屏幕框代码:

 1 /**
 2  * Created by Administrator on 2016/1/26.
 3  */
 4 var i;
 5 function draw (id){
 6     var canvas = document.getElementById(id);
 7     context = canvas.getContext(‘2d‘);
 8     setInterval(painting,10);
 9     i=0;
10 }
11 function painting(){
12     context.fillStyle = "red";
13     context.fillRect(0,0,200,200);
14     context.fillStyle = "white";
15     context.clearRect(20,20,50,50);
16 }


这里有clearRect方法。

格式:

  clearRect(x,y,width,heigth)

  属性不解释。

  作用:用于擦除。

 
时间: 2024-11-08 18:59:46

canvas绘制中的API的相关文章

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

canvas绘制饼状图动画 1.HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 6

HTML5 Canvas八大核心技术及其API用法

什么是canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染 位图像.Canvas由一个可绘制区域HTML代码中的属性定义高度和宽度(注:用其属性width和height设置宽度和高度时不能跟像素单位 “px”).JavaScript代码可访问该区域,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形. Canvas八大核心技术(3D3R公司创始人兼CEO Ohad Eder-Pressman的独到见解): 1.游戏 HTML5在基于Web的图像显示方面比F

canvas绘制饼状图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06绘制饼状图</title> </head> <body> <canvas id="canvas"> 抱歉,您的浏览器不支持Canvas.请升级您的浏览器! </canvas> <s

运用canvas绘折线图和柱状图

一.绘制折线图 1.首先,随便定义一个数组对象代表坐标,然后绘出打底的网格线: <canvas width="600px" height="400px" ></canvas> <script> var mycanvas=document.querySelector("canvas"); var pan=mycanvas.getContext("2d"); var wid=mycanvas.w

canvas 绘圆加边框

HTML5中canvas元素,绘制圆形需要使用路径,开始时要取得图形上下文,首先使用路径来勾勒图形的轮廓,然后设置颜色,进行绘制. arc(cx,cy,radius,start_angle,end_angle,direction); cx 水平坐标  cy 垂直坐标  radius 圆心  start-angel 圆周起始位置 (以圆心为参考点,不是以坐标原点为参考点.下面配图详细解释)  end_angle   圆周结束位置 Math.PI是半圆 Math.PI*2是整个圆 0.5为四分之一 

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

一.HTML代码: <!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas Demo</title> <script type="text/javascript" src="matrixtext.js"></script> <style> @font-face { font-family: 'Matr

canvas 绘点图

项目中需要一个记录点实时变动的信息,在此记录一下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js">

Android:使用canvas绘制饼状统计图(自动适应条目数量/大小)

本例的目的是实现一个简单的饼状统计图,效果如下:          特点: 1.使用非常方便,可放在xml布局文件中,然后在代码中设置内容,即: PieChartView pieChartView = (PieChartView) findViewById(R.id.pie_chart); PieChartView.PieItemBean[] items = new PieChartView.PieItemBean[]{ new PieChartView.PieItemBean("娱乐"

Android:使用canvas绘柱状统计图(自动计算宽高及分度值、可左右滑动)

本例实现了一个简单的柱状统计图,如下:        特点: 1.根据数据源自动计算每个条目的高度.宽度.间距,自动计算分度值. 2.当条目数较多时,可左右滑动查看全部内容,图形.文字同步滑动,并且松手后会渐渐的停下来(而不是立刻停下来). 代码: (1)核心代码:BarChartView.java package com.sina.appbarchart; import android.app.Activity; import android.content.Context; import a