html5中canvas基本应用
2013-04-09 17:40
357 查看
<!DOCTYPE html> <head> <meta charset=utf-8> <title>canvas</title> <script src="jquery.min.js"></script> </head> <body> <canvas id="php100" width="500" height="500" onmousemove="mousexy(event)"></canvas> <div id="ds"></div> <script type="text/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,300,300); //定义矩形大小 //========线====== p100.moveTo(10,10); //起始位置 p100.lineTo(150,50); //终止位置 p100.lineTo(10,50); //如果没有再次设置起始位置将从结束位置开始画 p100.stroke(); //结束图形 //=======圆======= p100.fillStyle="blue"; //定义演示 p100.beginPath(); //从新开始画,防止冲突重叠 p100.arc(200,200,30,0,Math.PI*2,true); //x坐标,y坐标,直径,Math.PI是圆周率 p100.closePath(); //结束画布,防止冲突重叠 p100.fill(); //结束渲染 //======颜色渐变==== 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); //设置色块 //=======图形载入===== var img=new Image() img.src="logo.png" p100.drawImage(img,220,30); //监视鼠标 function mousexy(n) { x=n.clientX; y=n.clientY; document.getElementById("ds").innerHTML="坐标: x轴"+x+" y轴"+y; } </script> </body> </html>
相关文章推荐
- HTML5之canvas基本API介绍及应用 1
- HTML5之canvas基本API介绍及应用 1
- 未来web浏览技术提前体验:10个会让你惊叹不已的HTML5画布(canvas)技术应用演示
- HTML5 canvas基本绘图之填充样式实现
- html5 canvas 画图基本教程
- 10个奇特的 HTML5 Canvas 应用试验
- html5之Canvas坐标变换应用-时钟实…
- html5笔记(4)canvas简单应用
- HTML5中的canvas基本概念及绘图
- [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法
- HTML5 Canvas圆盘抽奖应用(适用于Vue项目)
- html5 canvas基本用法
- HTML5 Canvas 10个奇特的应用试验
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
- 未来web浏览技术提前体验:10个会让你惊叹不已的HTML5画布(canvas)技术应用演示
- HTML5 Canvas圆盘抽奖应用
- HTML5 Canvas(1) 绘制基本图形和线条
- HTML5 canvas 画布的建立和描绘一些基本样式
- 使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
- HTML5 :Canvas之基本用法