原创力文档- 1、本文档共24页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
TP15Canvas画图全解
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
文档评论（0）