cxt.arc(100,100,30,0,Math.PI*2,true); 括号内第一个和第二个参数,代表圆心坐标。第三个参数是圆的半径。第四个参数代表圆周起始位置。0 PI就是起始位置。沿顺时针路线,分别是0.5 PI(正下方),1 PI和1.5 PI(正上方),为画饼图提供了扇形范围的依据。 第五个参数是弧长Math.PI*2就是整个圆,Math.PI是半圆。第六个参数是一个布尔值,true是顺时针false是顺时针。
我们注重客户提出的每个要求,我们充分考虑每一个细节,我们积极的做好成都网站设计、做网站服务,我们努力开拓更好的视野,通过不懈的努力,创新互联公司赢得了业内的良好声誉,这一切,也不断的激励着我们更好的服务客户。 主要业务:网站建设,网站制作,网站设计,微信小程序定制开发,网站开发,技术开发实力,DIV+CSS,PHP及ASP,ASP.Net,SQL数据库的技术开发工程师。
!DOCTYPE html
html
head
meta charset=utf-8
titleHTML5-canvas/title
script
var r = 20;
var x = 250 - r;
var y = 0;
var h = 0;
var w = 3;
function draw() {
var chr = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
chr.strokeStyle = "rgba(255,0,0,1)";
chr.clearRect(0, 0, width, height);
chr.fillStyle = "#c81623";
chr.beginPath();
chr.arc(x, y, r, 0, Math.PI * 2, 1);
chr.fill();
chr.font = "30px Verdana";
var gradient = chr.createLinearGradient(0, 0, width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
chr.fillStyle = gradient;
chr.fillText("ya死性子", x - 10, y + 110);
chr.closePath();
x += w;
y += h;
x = x width - r ? width - r : x;
x = x r ? r : x;
y = y height - r ? height - r : y;
y = y r ? r : y;
if (w 0 x = width - r || w 0 x = r) {
w = -w;
}
if (h 0 y = height - r || h 0 y = r) {
h = -h;
}
}
/script
/head
body
div style="margin:0px auto; width:500px;"
canvas id="canvas" width="500" height="200" style="border:1px solid #c81623"/canvas
br /
input onclick="clearInterval(window.interval);window.interval=setInterval(draw,5);" value="开始" type="button" /
input onclick="clearInterval(window.interval);" value="停止" type="button" /
/div
/body
Cavas的英文解释是画布,使用这个Html5的Canvas标签可以创建画布,结合JavaScript可以画出很多图形,我们先以画一个蓝色矩形为例,说明一下这个标签的使用方法,
首先需要建立一个HTML5的网页,方法是:
进入DW后,选择:文件--新建
在弹出的对话框中选择文件类型为Html5
选择“创建”后,即会形成一个空白网页,选择“文件”--"保存“
起名为:juxing
这个名字可以依据自己的喜好起,但最好名字与网页内容相关,以后好找,另外一个需要注意的是,最好不用汉字。
我们将视图切换为”代码“视图
并将标题改为”画出矩形“
标题也可以依据自己的喜好进行设定,并不影响网页的运行。
Html是标记型语言,各种功能都需要在对应的标签里面才可以,所以我们首先需要添加标签。
我们只需输入c,就会看到提示列表里出现我们所需要的标签canvas,按下回车键,即可完成输入。
之后,我们每一次按下空格、或输入相关字母,都会有提示列表,我们只需选择所需的项目,按下回车即可,并不需要完整输入字串,可以避免输入时的拼写错误。在本例中,只有引号内的”mycanvas“是需要完整输入的,其他部分的关键字都可以通过提示列表进行输入。
命令为:canvas id="mycanvas" width="600" height="400"/canvas
只有Canvas标记是不能直接画出图来的,需要配合JavaScript语言,首先需要写出对应的程序标记。
Html语言中的标记都是成对出现的,我们为了避免错误,可以先将标记的起始、标记的结束写好
写好前后标记后,我们就可以在标记中使用JavaScript语言,调用Canvas标记,画出我们所需要图形了,方法是:
var canvas=document.getElementById('mycavas');
将变量canvas,赋值为我们之前在html中定义的画布”mycanvas,以方便JavaScript调用
var ctxt=canvas.getContext('2d');
将变量 ctxt赋值为利用刚定义的“canvas”返回的二维绘图环境对象,使用这个对象就可以绘图了
使用fillStyle方法设置颜色,是十六进制表示的三原色分量范围是从“#000000”至“FFFFFF”
ctx.fillStyle='#0066cc';
我们将颜色设置为一种蓝色,这个颜色也可以随自己喜好 更改。
ctx.fillRect(50,50,400,200);
填充的起始位置设置为(50,50),矩形宽度为400,高度为200
选择在浏览器中浏览后,即可看到我们所需要的矩形
目前还不可以,但是你可以通过别的技巧来实现,比如在这个圆上加一层透明的div之类的,然后为其设置超链接就可以了
stroke()是描边,就是空心圆。fill()是填充,就是实心圆
//空心
var canvas = document.getElementById("myCanvas").getContext('2d');
canvas.beginPath();
canvas.arc(圆心x坐标,圆心y坐标,半径,0,2*Math.PI,true);
canvas.closePath();
canvas.strokeStyle='black';
canvas.stroke();
//实心
var canvas = document.getElementById("myCanvas").getContext('2d');
canvas.beginPath();
canvas.arc(圆心x坐标,圆心y坐标,半径,0,2*Math.PI,true);
canvas.closePath();
canvas.fillStyle='black';
canvas.fill();
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为四分之一
direction 顺、逆时针 false为顺时针,true为逆时针(决定了圆弧的方向)
例:(点击查看效果)
!DOCTYPE html
head
meta charset="UTF-8" /
script
function draw(id) {
var canvas = document.getElementById(id);
if (canvas == null) return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
for (var i = 0; i 10; i++) {
context.beginPath();
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = 'rgba(255, 0, 0, 0.25)';
context.fill();
}
}
/script
/head
body onLoad="draw('canvas');"
canvas id="canvas" width="400" height="300"/
/body
/html
context.beginPath();
该方法不使用参数,通过调用该方法,开始路径的绘制。在几次循环的创建路径的过程中,每次开始创建是都要调用beginPath函数。
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
该方法使用六个参数,x为绘制圆形的起点横坐标,y为绘制圆形图形的起点坐标,radius为绘制圆形半径,
starAngle为开始角度(以圆心为参考点,绕圆心旋转,不是以坐标原点为参考点),endAngle为结束角度,anticlockwise为是否按顺时针方向进行绘制。
arc方法不仅可以用来绘制圆形,也可以用来绘制圆弧。
context.closePath();
将路径关闭后,路径的创建工作就完成了,但还没有真正绘制任何图形。
context.fillStyle = 'rgba(255, 0, 0, 0.25)';
context.fill();
使用创建好的路径绘制图形。