HTML5 Canvas 画图标签、画线、圆、渐变色
2013-01-12 01:05:07|
发布: 黄奕能|
浏览: 4672
HTML5 Canvas 画图
标签、画线、圆、渐变色
内容摘要：Canvas标签定义，并获得坐标；画矩形，定义颜色，透明度；画直线，定义连接，节点；画圆，定义弧度，节点；画渐变色，定义节点渐变效果；读入一张图片
<canvas
onmousemove="mousexy(event)"></canvas>
<div></div>
//监视鼠标
function mousexy(n){
x=n.clientX;
y=n.clientY;
$("#ds").html("坐标: x轴"+x+" y轴"+y);
}
2、画矩形，定义颜色，透明度
<canvasbrush:js;toolbar:false;">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); //定义矩形大小
3、画直线，定义连接，节点
<canvasmycanvas");
var p100=c.getContext("2d");
------
p100.moveTo(10,10); //起始位置
p100.lineTo(150,50); //终止位置
p100.lineTo(10,50); //如果没有再次设置起始位置将从结束位置开始画
p100.stroke(); //结束图形
4、画圆，定义弧度，节点
<canvasmycanvas");
var p100=c.getContext("2d");
------
p100.fillStyle="blue"; //定义演示
p100.beginPath(); //从新开始画，防止冲突重叠
p100.arc(200,200,30,0,Math.PI*2,true); //x坐标，y坐标，直径，始，终，时针
p100.closePath(); //结束画布，防止冲突重叠
p100.fill(); //结束渲染
5、画渐变色，定义节点渐变效果
<canvasmycanvas");
var p100=c.getContext("2d");
------
var grd=p100.createLinearGradient(100,100,175,50); //颜色渐变的起始坐标和终点坐标
grd.addColorStop(0,"yellow"); //0表示起点..0.1 0.2 ...1表示终点，配置颜色
grd.addColorStop(1,"blue");
p100.fillStyle=grd; //生成的颜色块赋值给样式
p100.fillRect(100,100,175,50); //设置色块
6、绘图片
<canvasmycanvas");
var p100=c.getContext("2d");
------
var img=new Image()
img.src="logo.png"
p100.drawImage(img,220,30);
7、完整示例
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>PHP100 HTML5视频教程-canvas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<canvas
onmousemove="mousexy(event)"></canvas>
<div></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>
效果图：
转载请注明出处【】
如非特别注明，本站内容均为领悟书生原创，转载请务必注明作者和原始出处。
本文地址：
什么是响应式网页设计？
HTML5项目笔记9：HTML5 Canvas 的图表报表开发
HTML5项目笔记8：使用HTML5 的跨域通信机制进行数据同步
HTML5项目笔记7：使用HTML5 WebStorage API构建与.NET对应的会话机制
HTML5项目笔记6：使用HTML5 FileSystem API设计离线文件存储
HTML5项目笔记5：使用HTML5 WebDataBase设计离线数据库
HTML5项目笔记4：使用Audio API设计绚丽的HTML5音乐播放器
HTML5项目笔记3：使用Canvas设计离线系统的Logo
HTML5项目笔记2：离线系统表单设计
相关文章
精彩导读
热门资讯
关注我们
