• / 8
  • 下载费用:10 金币  

第4课_HTML5Canvas画图标签&画线,圆,渐变色.ppt

关 键 词:
第4课_HTML5Canvas画图标签&画线 圆 渐变色.ppt
资源描述:
内容摘要,Canvas标签定义,并获得坐标 画矩形,定义颜色,透明度 画直线,定义连接,节点 画圆,定义弧度,节点 画渐变色,定义节点渐变效果 读入一张图片,主讲:张恩民 官网:www.php100.com,(第24讲) HTML5 Canvas 画图标签 & 画线,圆,渐变色,,(第24讲) HTML5 Canvas 画图标签 & 画线,圆,渐变色,1、Canvas标签定义,并获得坐标,,//监视鼠标 function mousexy(n) { x=n.clientX; y=n.clientY; document.getElementById(“ds“).innerHTML=“坐标: x轴“+x+“ y轴“+y; },,(第24讲) HTML5 Canvas 画图标签 & 画线,圆,渐变色,2、画矩形,定义颜色,透明度,,Javascript 部分:,var c=document.getElementById(“php100“); 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); //定义矩形大小,,(第24讲) HTML5 Canvas 画图标签 & 画线,圆,渐变色,2、画直线,定义连接,节点,,Javascript 部分:,var c=document.getElementById(“php100“); var p100=c.getContext(“2d“);------ p100.moveTo(10,10); //起始位置 p100.lineTo(150,50); //终止位置 p100.lineTo(10,50); //如果没有再次设置起始位置将从结束位置开始画 p100.stroke(); //结束图形,,(第24讲) HTML5 Canvas 画图标签 & 画线,圆,渐变色,2、画圆,定义弧度,节点,,Javascript 部分:,var c=document.getElementById(“php100“); 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(); //结束渲染,,(第24讲) HTML5 Canvas 画图标签 & 画线,圆,渐变色,2、画渐变色,定义节点渐变效果,,Javascript 部分:,var c=document.getElementById(“php100“); 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); //设置色块,,(第24讲) HTML5 Canvas 画图标签 & 画线,圆,渐变色,2、画直线,定义连接,节点,,Javascript 部分:,var c=document.getElementById(“php100“); var p100=c.getContext(“2d“);------ var img=new Image() img.src=“logo.png“ p100.drawImage(img,220,30);,感谢收看本次教程欢迎访问: www.php100.com,(第24讲) HTML5 Canvas 画图标签 & 画线,圆,渐变色,
展开阅读全文
  微传网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
0条评论

还可以输入200字符

暂无评论,赶快抢占沙发吧。

关于本文
本文标题:第4课_HTML5Canvas画图标签&画线,圆,渐变色.ppt
链接地址:https://www.weizhuannet.com/p-10036079.html
微传网是一个办公文档、学习资料下载的在线文档分享平台!

微传网博客

网站资源均来自网络,如有侵权,请联系客服删除!

 网站客服QQ:80879498  会员QQ群:727456886

copyright@ 2018-2028 微传网络工作室版权所有

     经营许可证编号:冀ICP备18006529号-1 ,公安局备案号:13028102000124

收起
展开