TP15Canvas画图全解.ppt

var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); var img=document.getElementById(php100); img.onload = function() { ctx.drawImage(img,10,10); } script var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); ctx.fillStyle=red; ctx.fillRect(20,20,75,50); // 调节透明度 ctx.globalAlpha=0.2; ctx.fillStyle=blue; ctx.fillRect(50,50,75,50); ctx.fillStyle=green; ctx.fillRect(80,80,75,50); /script * Canvas画图 Canvas标签定义，并获得坐标 画矩形，定义颜色， 画直线，定义连接，节点 画圆，定义弧度，节点 画渐变色，定义节点渐变效果 读入一张图片 目标 HTML5 Canvas 画图标签 画线，圆，渐变色 1、Canvas标签定义，并获得坐标 canvas id=php100 width=500 height=500“ onmousemove=mousexy(event)/canvas div id=ds/div //监视鼠标 function mousexy(n) { x=n.clientX; y=n.clientY; document.getElementById(ds).innerHTML=坐标: x轴+x+ y轴+y; } canvas标签是画布，通过getContext（）获得一个CanvasRenderingContext2D对象，该对象具有强大的绘图功能。 HTML5 Canvas 画图标签 画线，圆，渐变色 2、画直线，定义连接，节点 canvas id=php100 width=500 height=500/canvas Javascript 部分： var c=document.getElementById(php100); var P100=c.getContext(2d); P100.beginPath();//表示开始画图的一条路径，或者是重置一条新路径 P100.lineWidth=10; P100.strokeStyle=rgb(255,0,0); P100.moveTo(10,10); //起始位置 P100.lineTo(150,50); //终止位置 P100.lineTo(10,50); //如果没有再次设置起始位置将从结束位置开始画 P100.stroke(); P100.closePath(); //结束图形 HTML5 Canvas 画图标签 画线，圆，渐变色 2、画矩形，定义颜色 canvas id=“my2 width=500 height=500/canvas var c=document.getElementById(my2); var p=c.getContext(2d); p.beginPath();//开始路径 p.strokeStyle=#0f0; //画笔颜色 p.rect(100,0,44,55);//从指定的位置画矩形的宽和高 p.stroke();//开始画线 p.fillStyle=#FF0000; //定义背景颜色 p.fillRect(100,100,50,50); //定义矩形的大小 p.closePath(); HTML5 Canvas 画图标签 画线，圆，渐变色 2、画圆，定义弧度，节点 canvas id= myCanvas width=500 height=500/canvas Javascript 部分： var c=document.getElementById(“myCanvas”);var ctx=c.getContext(“2d”);ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI,true);//(x轴,y轴,半径,起始角,以弧度计。（弧的圆形的三点钟位置是 0 度),结束角, False = 顺时针，true = 逆时针。)ctx.stroke(); ctx.closePath(); HTML5 Canvas 画图标签 画线，圆，渐变色 2、画渐变色，定义节点渐变效果 canvas id=php100 width=500 height=500/canvas Javascript 部分： var c=document.getE