几组图片轮回html,HTML 5 Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

内容

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

1绘制一个红色的矩形

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);//绘制 150x75 的矩形，从左上角开始 (0,0)

2指定从何处开始，在何处结束，来绘制一条线

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.moveTo(10,10);//第一个点

cxt.lineTo(150,50);//第二个点

cxt.lineTo(10,50);//第三个点

cxt.stroke();

3规定尺寸、颜色和位置，来绘制一个圆

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

参数：

arc(cx,cy,radius,start_angle,end_angle,direction);

cx 水平坐标；cy 垂直坐标；radius 半径

start-angel 圆周起始位置

end_angle 弧长 Math.PI是半圆 Math.PI*2是整个圆 0.5为四分之一

direction 顺、逆时针 false为顺时针，true为逆时针(决定了圆弧的方向)

4指定的颜色来绘制渐变背景

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

var grd=cxt.createLinearGradient(0,0,175,50);

grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");

cxt.fillStyle=grd; //把渐变赋给填充样式

cxt.fillRect(0,0,175,50);

参数

createLinearGradient(x1,y1,x2,y2)

x1,y1就是表示线性渐变的起点坐标，x2,y2就表示终点坐标。

addColorStop(位置,颜色)

5一幅图像放置到画布上

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

var img=new Image()

img.src="flower.png"

cxt.drawImage(img,0,0);

6 getContext("2d") 对象是内建的 HTML5 对象，

拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

几组图片轮回html,HTML 5 Canvas相关推荐

IE下及标准浏览器下的图片旋转（二）—— Canvas（1）
文章过长,一篇无法保存. IE下及标准浏览器下的图片旋转(一)--滤镜,CSS3 3. canvas canvas 是html5中的新标签,使用canvas之前我们先看下它的定义:<canvas ...
IE下及标准浏览器下的图片旋转（二）—— Canvas（2）
文章过长,一篇无法保存 IE下及标准浏览器下的图片旋转(二)-- Canvas(1) 同样,作为最后,我们使用使用jquery也为canvas写个旋转demo: javascript: $(funct ...
html 中用canvas加载图片,【实例】使用canvas缓缓加载一个图片到web页面中
由于要做web前端设计,用到这个效果,弄了一个晚上,总算是弄出来了效果从上到下缓缓载入一个图片思路获取一个空白canvas,使用drawImage方法画出整个图像获取这个图像中的每一行的数据清 ...
html页面转换成图片的三种方法——canvas、dom-to-image、html2canvas
html页面转换成图片的三种方法--canvas.dom-to-image.html2canvas canvas绘制网络图片报错(跨域) 使用canvas将html页面转成图片 dom-to-imag ...
图片怎么转为html5,将图片转化为矢量并canvas化的容易工具(基于Node.js + HTML5 canvas)...
将图片转化为矢量并canvas化的简单工具(基于Node.js + HTML5 canvas) 一.前言最近需要做一个图标的矢量化,但是没有数据,因此采用了node.js作为数据处理工具,canva ...
html5图片灰度显示,HTML5 组件Canvas实现图像灰度化
HTML5发布已经有很长一段时间了,一直以来从来没有仔细的看过,过年刚来随便看看发现HTML5中的Canvas组件功能是如此的强大,不怪很多牛人预言Flash已死,死不死不是我要关心的,我关心的C ...
手机站点开发及手机中图片加速显示img的Canvas方法
随着手机开发越来越流行,手机开发的非常多框架也应运而生,比較好用的手机站点开发框架推荐例如以下: 1.zeptojs.里面封装了非常多手机特有方法,比如touch.js等等. 和jquery使用方法差 ...
html让图片自动旋转360,html5 canvas 360图片旋转制作抽奖转盘代码
特效描述:html5canvas 360图片旋转抽奖转盘代码.60图片旋转制作抽奖转盘代码代码结构 1. HTML代码 var colors = ["#B8D430", &qu ...
python html转图片失真_html dom 转化成图片踩坑记（canvas toDataURL）
需求在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...

几组图片轮回html,HTML 5 Canvas

几组图片轮回html,HTML 5 Canvas相关推荐

最新文章

热门文章