html5之canvas画图 1.写字板功能
写字板事例：
写字板分析：1.点击鼠标開始写字（onmosedown）2.按下鼠标写字（onmousemove）3.松开鼠标，停下写字（撤销onmousemove事件）：
代码:
<strong><!doctype html>
</strong><html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#canvas {
margin: 0px;
padding: 0px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400">当前浏览器不支持canvas</canvas>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="arrow.js"></script>
<script type="text/javascript">
window.onload=function(){ var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d"); /*var mouse=utils.captureMousePosition(canvas); */ //加入mousedown监听事件。在用户鼠标按下后開始画线。并注冊mousemove事件
canvas.addEventListener("mousedown",function(event){ context.beginPath();
context.moveTo(event.clientX, event.clientY);
//alert("-------------")
canvas.addEventListener("mousemove",onMouseMove,false);
},false); //在鼠标移动时划线
function onMouseMove(event){
context.lineTo(event.clientX,event.clientY);
context.stroke();
}
//在鼠标按键松开后，注销鼠标移动事件
canvas.addEventListener("mouseup",function(event){
canvas.removeEventListener("mousemove",onMouseMove,false);
},false);
}
</script>
</body>
</html>
html5之canvas画图 1.写字板功能的更多相关文章
- html5之canvas画图基础
HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...
- canvas h5制作写字板
<!DOCTYPE html><html><head> <meta charset="utf-8"> <script type ...
- html5之canvas画图
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...
- JS+HTML5的Canvas画图模拟太阳系运转
查看效果:http://hovertree.com/texiao/html5/9.htm 地球自传 http://hovertree.com/texiao/html5/8.htm 代码如下: < ...
- HTML5使用canvas画图时，图片被自动放大模糊的问题
最近在研究canvas技术,发现一个问题,就是所画图像会随着画布大小自动变换大小.原因如下 <canvas id="cxt" style="width: 500px ...
- canvas画布，写字板
<!doctype html><html><head> <meta charset="utf-8"> <meta http-e ...
- HTML5 Canvas 画图入门
HTML5 Canvas 画图入门 HTML5 Canvas 画图入门,仅供学习參考 <!DOCTYPE html> <html> <head> <meta ...
- HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...
- html5 Canvas画图3：1px线条模糊问题
点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...
随机推荐
- TCP Socket的一些行为
几个重要的结论: 1. read总是在接收缓冲区有数据时立即返回,而不是等到给定的read buffer填满时返回. 只有当receive buffer为空时,blocking模式才会等待,而nonb ...
- python接口自动化4-绕过验证码登录（cookie）
前言 有些登录的接口会有验证码:短信验证码,图形验证码等,这种登录的话验证码参数可以从后台获取的(或者查数据库最直接). 获取不到也没关系,可以通过添加cookie的方式绕过验证码. 一.抓登录coo ...
- jsp中生成txt文件
import jxl.Workbook; import jxl.write.Label; import jxl.write.WritableSheet; import jxl.write.Writab ...
- Java Web应用软件保护方法
1 代码混淆概述目前针对Java源文件方法主要有以下几种方法:本地编译技术.数字水印技术.ClassLoader加密技术以及代码混淆技术.Java本地编译是指将Java应用程序编译成本地应用程序,如W ...
- Android.mk文件简单分析
Android.mk文件简单分析 一个Android.mk文件用来向编译系统描写叙述须要编译的源码.详细来说:该文件是GNUMakefile的一小部分.会被编译系统解析一次或多次. 能够在每个Andr ...
- 论文神器Latex30分钟快速入门教程-只需9步向学神看齐
小E说:工欲善其事,必先利其器.立志做个安静的美学霸的你,学会Latex,一定能使你的论文写作事半功倍. 1.LaTeX软件的安装和使用 方法A(自助):在MikTeX的官网下载免费的MikTeX编译 ...
- 【ContestHunter】【弱省胡策】【Round5】
反演+FFT+构造+DP 写了这么多tag,其实我一个也不会 A 第一题是反演……数据范围10W,看着就有种要用FFT等神奇算法的感觉……然而蒟蒻并不会推公式,只好写了20+10分的暴力,然而特判30 ...
- Kmeans算法原理极其opencv实现(转帖)
原帖地址:http://blog.csdn.net/qll125596718/article/details/8243404 1.基本Kmeans算法[1] 选择K个点作为初始质心 repeat ...
- [20] 鼓状物(Drum)图形的生成算法
顶点数据的生成 bool YfBuildDrumVertices ( Yreal radius, Yreal assistRadius, Yuint slices, Yuint stacks, YeO ...
- Proxy 代理模式 动态代理 cglib MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...