首页 > 作文

使用HTML5做个画图板的方法介绍

更新时间:2023-04-06 17:38:51 阅读：评论：0

首先要说明的是这里不是用鼠标画画，而是在触摸设备上用手指，比如ipad。

做画图板，自然使用html5的canvas来实现西安外国语大学是211还是985了。在canvas中我们可以画圆，画矩形，画自定义的线条等等。这次主要使用的画圆跟画线条来实现。html中支持对触摸事件的响应。

ontouchstart 触摸开始

ontouchmove 触摸滑动

ontouchend 触摸结束

有了这些事件，我们实现用手指在浏览器里画画就很简单了。

ipad上的效果：

思路：当手指触摸到屏幕的时候在ontouchstart 事件中在手指触摸的位置上添加一个圆；当手指开始滑动的时候在ontouchmove中不断的从上一个触摸点到下一个点画线条。

html：

复制代码代码如下:

<!doctype html public “-//w3c//dtd xhtml 1.0 transitional//en” “/d/file/titlepic/xhtml1-transitional.dtd& <html 网络起名字xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>canvas</title>

<meta name = “viewport” content = “width = device-width, ur-scalable = no”>

</head>

<body>

<canvas id=”canvas” ></canvas>

<script type=”text/javascript” src=”canvasscript.js” chart=”utf-8″></script>

</body>

</html>

js：

复制代码代码如下:

//get canvas

var canvas = document.getelementbyid(“canvas”);

//full screen

canvas.width=window.innerwidth;

canvas.height=window.innerheight;

//是否支持触摸

var touchable = ‘createtouch’ in document;

if (touchable) {

canvas.addeventlistener(‘touchstart’, ontouchstart, fal);

canvas.addeventlistener(‘touchmove’, ontouchmove, fal);

}

el

{

alert(“touchable is fal !”);

}

//上一次触摸坐标

var lastx;

var lasty; var ctx =canvas.getcontext(“2d”);

ctx.linewidth=10;//画笔粗细

ctx.strokestyle=考勤管理”#ff0000″;//画笔颜色 //触摸开始事件

function ontouchstart(event) {

event.preventdefault();

lastx=event.touches[0].clientx;

lasty=event.touches[0].clienty;

drawround(lastx,lasty); }

//触摸滑动事件

function ontouchmove(event) {

try

{

event.preventdefault();

drawline(lastx,lasty,event.touches[0].clientx,event.touches[0].clienty);

lastx=event.touches[0].clientx;

lasty=event.touches[0].clienty;

}

catc水力资源h(err){

alert( err.description);

} } //画圆

function drawround(x,y)

{

ctx.fillstyle=”#ff0000″;

ctx.beginpath();

ctx.arc(x,y,5,0,math.pi*2,true);

ctx.clopath();

ct文字签名档x.fill();

}

//画线

function drawline(startx,starty,endx,endy)

{

ctx.beginpath();

ctx.linecap=”round”;

ctx.moveto(startx,starty);

ctx.lineto(endx,endy);

ctx.stroke();

}