<!DOCTYPE html>
<
head
>
<
meta
charset
=
utf
-8>
<
title
>PHP100 HTML5视频教程-canvas</
title
>
</
head
>
<
body
>
<
canvas
id
=
"mycanvas"
width
=
"500"
height
=
"500"
onmousemove
=
"mousexy(event)"
></
canvas
>
<
div
id
=
"ds"
></
div
>
<
script
type
=
"text/javascript"
>
var c=document.getElementById("mycanvas");
var p100=c.getContext("2d");
p100.fillStyle="#FF0000"; //定义颜色
p100.fillRect(0,0,300,300); //定义矩形的大小
p100.fillStyle="rgba(0,0,255,0.5)"; //定义颜色,支持透明
p100.fillRect(200,200,500,500); //定义矩形大小
//========线======
p100.moveTo(10,10); //起始位置
p100.lineTo(150,50); //终止位置
p100.lineTo(10,50); //如果没有再次设置起始位置将从结束位置开始画
p100.stroke(); //结束图形
//=======圆=======
p100.fillStyle="blue"; //定义演示
p100.beginPath(); //从新开始画,防止冲突重叠
//x坐标,y坐标,直径,Math.PI是圆周率
p100.arc(200,200,30,0,Math.PI*2,true);
p100.closePath(); //结束画布,防止冲突重叠
p100.fill(); //结束渲染
//======颜色渐变====
//颜色渐变的起始坐标和终点坐标
var grd=p100.createLinearGradient(100,100,175,50);
//0表示起点..0.1 0.2 ...1表示终点,配置颜色
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"blue");
p100.fillStyle=grd; //生成的颜色块赋值给样式
p100.fillRect(100,100,175,50); //设置色块
//=======图形载入=====
var img=new Image()
img.src="logo.png"
p100.drawImage(img,220,30);
//监视鼠标
function mousexy(n){
x=n.clientX;
y=n.clientY;
$("#ds").html("坐标: x轴"+x+" y轴"+y);
}
</
script
>
</
body
>
</
html
>