HTML5 canvas 小实例的代码详情-代码-最代码

首页>代码>HTML5 canvas 小实例>/1329233232102400.java

<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>dome html5</title>
<script src="./jquery/jquery-1.9.1.min.js"></script>

</head>
<body> 
<!--Header-->
<header>
<hgroup>头部</hgroup>
</header>
<canvas id="sid" width="500" height="500" onmousemove="mousexy(event)">
浏览器不支持。
</canvas>
<div id="ds"></div>
<script type="text/javascript">
//鼠标位置
function mousexy(n){
	var x=n.clientX;
	var y=n.clientY;
	document.getElementById("ds").innerHTML="坐标：x轴"+x+" y轴"+y;
}
var c = document.getElementById("sid");
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); //定义矩形大小
var img = new Image();
img.onload = function () {
    p100.drawImage(img, 0, 0);
}
img.src = "jq.png";
</script>
</body>
</html>

最近浏览更多

xueys123 LV13 2023年10月26日

孟子大叔 LV7 2023年5月25日

微信网友_6465435620184064 LV6 2023年5月19日

451231 LV1 2022年12月26日

董畅瑶 LV1 2022年12月8日

xiongqi0 2022年12月7日

暂无贡献等级

张晓坤 LV1 2022年11月9日

微信网友_6212133351690240 LV2 2022年11月9日

Tom-TAO LV1 2022年7月27日

3199625134 LV10 2022年5月5日