تعليق: 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"> "</script </a >>
</head>
<style>
قماش {الحدود: 2px صلبة #000 ؛}
</style>
<body>
<Canvas> </tanvas>
<script type = "text/javaScript">
$ (وثيقة). ready (function () {
var canvas = document.getElementById ("draw") ؛
var draw = canvas.getContext ("2d") ؛
draw.linewidth = 5 ؛ // سمك الخط
draw.strokestyle = "Red" ؛ //لون
var godraw = false ؛
// اضغط على الماوس
$ ("#draw"). mousedown (وظيفة (e) {
// إحداثيات دقيقة
var mousex = e.pagex-this.offsetleft ؛
var mousey = e.pagey-this.offsettop ؛
Draw.Moveto (Mousex ، Mousey) ؛
godraw = صواب ؛ </p> <p>})
// دع الماوس
$ ("#draw"). mouseup (function (e) {
godraw = false ؛
})
// حرك الماوس
$ ("#draw"). mousemove (وظيفة (e) {
إذا (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>
رسم تخطيطي للتكاثر