canvas绘制中的API
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的更多相关文章
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- canvas 绘点图
canvas 绘点图 项目中需要一个记录点实时变动的信息,在此记录一下: <!DOCTYPE html> <html lang="en"> <head ...
- 第166天:canvas绘制饼状图动画
canvas绘制饼状图动画 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 图形绘制中的PorterDuffXfermode
1.概述 在android图形渲染中 会使用到图像混合模式 <span style="font-size:18px;">setXfermode(Xfermode xfe ...
- canvas绘制饼型图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [canvas]用canvas绘制饼状图
折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- HTML5 Canvas绘文本动画(使用CSS自定义字体)
一.HTML代码: <!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas De ...
- canvas 绘圆加边框
HTML5中canvas元素,绘制圆形需要使用路径,开始时要取得图形上下文,首先使用路径来勾勒图形的轮廓,然后设置颜色,进行绘制. arc(cx,cy,radius,start_angle,end_a ...
- 使用canvas绘制饼状图
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- 图片的另一种展现—将后台图片编码直接展现为图片
1.应用场景 开发过程中,遇到这样的需求:需要将服务器上的图片展现在页面上,但是图片所在服务器不是对外的,图片所在服务器与应用服务器也不在同一台机器上,这时候就需要在开发中先将图 ...
- centos iscsi 配置
首先是服务器的设置:[root@localhost 桌面]# yum install scsi-target-* -y 安装服务 配置yum的方法太简单了,我就不写了[root@local ...
- javaMail发送邮件实例
背景:最近项目里有个实时发送邮件的功能,今天闲下来整理 一下,记录下来方便以后直接使用. 代码: package com.dzf.utils; import java.io.File; import ...
- how to use composer in fiddler
https://www.cnblogs.com/youxin/p/3570310.html http://docs.telerik.com/fiddler/generate-traffic/tasks ...
- Flume之核心架构深入解析
我们一起来了解Source.Channel和Sink的全链路过程. 一.Flume架构分析 这个图中核心的组件是: Source,ChannelProcessor,Channel,Sink.他们的关系 ...
- mysqldump 用法汇总
mysql mysqldump 只导出表结构 不导出数据 复制代码代码如下: mysqldump --opt -d 数据库名 -u root -p > xxx.sql 备份数据库 复制代码代 ...
- 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 ...
- Http协议与生命周期
一.Http知识: 1.基于socket 浏览器(格式一) web服务器(格式一) MYSQL客户端(格式二) MYSQL服务端(格式三) ...
- 自动化收集SQLSERVER诊断信息
自动化收集SQLSERVER诊断信息 相信很多人都遇到过当SQLSERVER出现问题的时候,而你又解决不了需要DBA或者微软售后支持工程师 去帮忙解决问题,那么他们一般需要你收集一些系统信息和SQ ...
- 自己动手写一个U盘拷贝小工具
这是五一期间,参照知乎上一篇的文章<十行代码--用python写一个USB病毒>写成的,最初只是单纯的想写成死循环,直到文件占满硬盘为止,第一个遇到的问题是,拷贝到硬盘之后,由于要无限次拷 ...