简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

html5教程制作简单画板代码分享

来源:易贤网   阅读:1590 次  日期:2016-07-11 16:47:07

温馨提示:易贤网小编为您整理了“html5教程制作简单画板代码分享”,方便广大网友查阅!

html5制作简单画板代码分享,大家参考使用吧

代码如下:

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<title></title>

<meta charset="UTF-8">

<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script</a>>

</head>

<style>

canvas{ border:2px solid #000;}

</style>

<body>

<canvas id="draw" width="500" height="500"></canvas>

<script type="text/javascript">

$(document).ready(function(){

var canvas=document.getElementById("draw");

var draw=canvas.getContext("2d");

draw.lineWidth=5; //线条粗细

draw.strokeStyle="red"; //颜色

var godraw=false;

//按下鼠标

$("#draw").mousedown(function(e){

//准确坐标

var mouseX=e.pageX-this.offsetLeft;

var mouseY=e.pageY-this.offsetTop;

draw.moveTo(mouseX,mouseY);

godraw=true;</p> <p> })

//放开鼠标

$("#draw").mouseup(function(e){

godraw=false;

})

//移动鼠标

$("#draw").mousemove(function(e){

if(godraw){

var mouseX=e.pageX-this.offsetLeft;

var mouseY=e.pageY-this.offsetTop;

draw.lineTo(mouseX+4,mouseY+4);

draw.stroke();

}</p> <p> })

})

</script>

</body>

</html>

更多信息请查看网页制作
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:html5教程画矩形代码分享
下一篇:html5 viewport使用方法示例详解
易贤网手机网站地址:html5教程制作简单画板代码分享
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!