使用canvas定义画板

/*===============自定义画板*/
function initpaint( canvas ){
var obj = canvas.getContext(‘2d‘);
canvas.onmousedown = function( e ){ //鼠标按下的时候
var mx = e.layerX;
var my = e.layerY;

obj.moveTo( mx, my);

canvas.onmousemove = function( e ){ //鼠标移动的时候
var endx = e.layerX;
var endy = e.layerY;

obj.lineTo( endx, endy);
obj.stroke();
};

canvas.onmouseup = function( e ){ //鼠标松开的时候

canvas.onmousemove = null;
canvas.onmouseup = null;
};
};
};

时间: 2024-10-24 22:47:21

使用canvas定义画板的相关文章

Html5新特性 <canvas>画板画直线

 以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

HTML5 canvas 做画板画图 可以做电子白板

HTML5 canvas 做画板画图 可以做电子白板 <html> <head> <meta charset="utf-8"> <title>HTML5 canvas 做画板画图 可以做电子白板</title> <style type="text/css"> <!-- #container { position: relative;} #imageView { border: 1px so

一款基于HTML5 Canvas的画板涂鸦动画

今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canvas的画板涂鸦动画应用,功能和之前那个类似,但是新增了回撤和清空画板的操作,实现思路也基本类似.实现的效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap"> <canvas id="canvas" cl

canvas简易画板。

在学canvas的时候,想到可以做一个自己用来画画的简易画板,加上canvas的基础都已经学完,便尝试做了一个画板.如图 1.获取标签. var c=document.getElementById('myCanvas'); var ctx= c.getContext('2d');var b=document.getElementById('b'); var b1=document.getElementById('b1'); var bbb=document.getElementById('bbb

Android利用canvas画画板

首先新建一个项目工程,建立文件,如下图所示 首先配置页面布局文件activity_main.xml,如下图所示: 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 a

WEB前端开发学习----10. canvas实现画板的两个方法

方法1:查看演示 点击鼠标作画 此方法就是鼠标移动的时候不停的画小圆点,然后用等粗的线将小圆点串起来(有点类似于珍珠项链).因为是小圆点,所以效果要比方法2好,比较平滑. 方法2:查看演示 点击鼠标作画 这个方法很容易理解,就是不断的将鼠标所在的位置用线段连起来.缺点是不够平滑,尤其是粗线条的时候. 方法1: [html] view plaincopy <!doctype html> <html> <head> <meta charset="utf-8&

基于canvas的画板

最近重新在看Html5&CSS3的知识,看到canvas的时候,想到了以前在学校学计算机图形学时做过的画图实验,于是想,可以基于html5和css3来做一款画板,经过1天的努力,完成了画板的一些简单的功能,发出来和大家进行分享一下. 这个画板的功能十分的简单,只是实现了随意画,基于橡皮筋的直线.圆.矩形.三角形的画法以及橡皮擦等,线条有数十种宽度和数十条颜色,而且能够下载完成的图画. 截图如下: 最后附上源码:https://github.com/Mafurion/Painter

html5 canvas 涂鸦画板

html5 canvas 的涂鸦画板,可以加载图片进行涂鸦,也可以下载服务器使用的php上传的图片不能超过1M,只能是jpg或者png 格式的演示地址的服务器网速不怎么样,读取文件可能很慢,到达100%的时候点击读取文件,如果没显示就多点几次?1. [代码]主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&quo

canvas画画板

制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板</title> <style> body{ background-color:#ccc; } .control-bar{ vertical-align:top; display:inline-block; } </style> </head> html结构 &