HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas绘图小实例之鼠标画线</title> <style> body{ background:#000;} #canvas1{ margin:100px 500px; background:#fff;} #canvas1 span{ color:#fff;} </style> <script> window.onload = function(){ var oCanvas = document.getElementById('canvas1'); var oContext = oCanvas.getContext('2d'); //获取绘图的2d环境 oCanvas.onmousedown = function(ev){ ev = ev || window.event; oContext.beginPath(); oContext.moveTo(ev.clientX - oCanvas.offsetLeft,ev.clientY - oCanvas.offsetTop); document.onmousemove = function(ev){ ev = ev || window.event; oContext.lineTo(ev.clientX - oCanvas.offsetLeft,ev.clientY - oCanvas.offsetTop); oContext.stroke(); } document.onmouseup = function(ev){ document.onmousemove = null; document.onmouseup = null; } } } </script> </head> <body> <canvas id="canvas1" width="1000" height="1000"> <span>该浏览器不支持canvas</span> </canvas> </body> </html>
HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线的更多相关文章
- HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5自学笔记[ 15 ]canvas绘图实例之钟表
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5自学笔记[ 11 ]canvas绘图基础1
html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...
- HTML5自学笔记[ 24 ]canvas绘图之星空草地
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 21 ]canvas绘图实例之马赛克
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 17 ]canvas绘图基础4
绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...
- HTML5自学笔记[ 16 ]canvas绘图基础3
canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...
随机推荐
- 十二 个经典 Linux 进程管理命令介绍
执行中的程序在称作进程.当程序以可执行文件存放在存储中,并且运行的时候,每个进程会被动态得分配系统资源.内存.安全属性和与之相关的状态.可以有多个进程关联到同一个程序,并同时执行不会互相干扰.操作系统 ...
- 登录界面 beta版
1.MainActivity.java package com.example.administrator.myapplication; import android.content.Intent; ...
- [HDU5907]Find Q(水)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5907 记下每块大小,然后n*(n+1)/2 #include <bits/stdc++.h> ...
- Servlet&jsp基础:第三部分
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- git bash下的选择、复制、粘贴
1. 打开git bash 2.点击左上角,选择属性,打钩 3.回到界面,选择一行文字,然后点击 “右键”,这样就复制到剪切板了.再点 “右键”,可以粘贴到命令窗口中了.
- CSS笔记(五)字体
CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母). 参考:http://www.w3school.com.cn/css/css_font.asp CSS字体系列 ...
- MQ使用几个命令
一.MQ常见基本指令: MQ现在使用的比较常见,但是在测试过程中,使用命令行直接查询,有时候事半功倍. activemq-admin stop activemq-admin list activemq ...
- 杭电HDU1042(有点坑的高精度)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1042 题意: Given an integer N(0 ≤ N ≤ 10000), your task i ...
- HDU-4514 湫湫系列故事——设计风景线 手动扩栈
题意:给定一个无向图,首先判定是否成环,然后求一条最长链. 分析:成环用并查集,最长链就是个最简单的树形dp了. #include <cstdlib> #include <cstri ...
- SpringMVC后缀
<!-- 在这里,使用*.html为后缀的URL都能被baobaotao Servlet截获,进而转由SpringMVC框架进行处理.在 Struts框架中,一般将URL后缀配置为*.do:在w ...