HTML5 Canvas 画图标签 & 画线，圆，渐变色

最新推荐文章于 2022-04-20 11:15:02 发布

qq_36106235

最新推荐文章于 2022-04-20 11:15:02 发布

阅读量609

点赞数

分类专栏： html5 文章标签： canvas html5 标签

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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 id="php100" width="500" height="500" οnmοusemοve="mousexy(event)"></canvas> <!-- 不管画什么都是必写canvas， 里面的鼠标移动事件在下面的监视鼠标函数要用-->
<div id="ds"></div>
<script type="text/javascript">
var c=document.getElementById("php100");//不管画什么都先获得ID // 获得canvas画布=
var p100=c.getContext("2d"); //不管画什么都先设置画布类型// 所有图形基于getContext属性 赋给p100对象 用p100实现效果



p100.fillStyle="#FF0000"; //fillStyle填充样式 定义颜色
p100.fillRect(0,0,300,300); //fillRect填充矩形大小 定义矩形的大小
p100.fillStyle="rgba(0,0,255,0.5)"; //第二个图形 定义颜色，支持透明
p100.fillRect(200,200,500,500); // 第二个图形 定义矩形大小

//========线======
p100.moveTo(10,10); //moveTo移动到 起始位置
p100.lineTo(150,50); //lineTo线到  终止位置
p100.lineTo(10,50); //如果没有再次设置起始位置将从结束位置开始画
p100.stroke(); //stroke画线 结束图形

//=======圆=======
p100.fillStyle="blue"; //fillStyle填充样式 定义演示
p100.beginPath(); //beginPath从新开始画，防止冲突重叠
p100.arc(200,200,30,0,Math.PI*2,true); //arc弧形 200,200圆点坐标 30半径 0代表3点钟方向0PI 还有0.5PI 1PI 1.5PI Math.PI*2圆周率 true||1 逆时针 false||0顺时针
//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) //将鼠标指针event传递进来
{
x=n.clientX;  //获得x轴
y=n.clientY;  //获得Y轴
document.getElementById("ds").innerHTML="坐标: x轴"+x+" y轴"+y;
}

</script>
</body>
</html>