canvas实现绘画
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
} #myCanvas {
background: #abcdef;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="550px" height="400px"></canvas>
<script src="main.js"></script>
</body>
</html>
js代码：
(function () {
var c = document.getElementById("myCanvas");
var con = c.getContext("2d");
c.onmousedown = function (e) {
c.onmousemove = function (e) {
con.beginPath();
con.arc(e.pageX, e.pageY, 5, 0, 2 * Math.PI);
con.fillStyle = "white";
con.fill();
con.closePath();
};
c.onmouseup = function (e) {
c.onmousemove = "";
}
}
})();
canvas实现绘画的更多相关文章
- Canvas基本绘画学习
学好Canvas,从简单开始.下面是一些Canvas入门最基本的实例分享: <!DOCTYPE html> <html> <head lang="en" ...
- Android Canvas设置绘画时重叠部分的处理模式【含效果图】
在Android的PorterDuff.Mode类中列举了他们制定的规则: android.graphics.PorterDuff.Mode.SRC:只绘制源图像 android.graphics.P ...
- html5的canvas绘制迷宫地图
canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...
- canvas游戏小试：画一个按方向键移动的圆点
canvas游戏小试:画一个按方向键移动的圆点 自己对canvas,但又有一颗做游戏的心TT.然后记录一下对canvas的学习吧,用一个按方向键控制的小圆点来做练习.(编程时用了一些es6的语法) ...
- 车大棒浅谈for循环+canvas实现黑客帝国矩形阵
背景: 一日在网上闲逛的之时,突然看到一个利用JQ插件实现canvas实现的电影黑客帝国的小Demo.觉得创意不错,就下载下来研究一下. 网上浏览jQuery的写法 $(document).ready ...
- js canvas获取图片base64 dataUrl
function getImgBase64(path, callback) { var img = new Image(); img.src = path; //图片加载完成后触发 img.onloa ...
- javascript canvas画订单
前段时间看了某个平台的后台,发现订单显示使用的canvas进行绘画(插件echarts),直观,明了的表达出了订单的走势如下 所以自己心痒痒的,就自己模仿了一个-->贴上代码 <style ...
- 理解Canvas原理
Canvas原理 Canvas我们把它翻译成画布,从字面意思我们就可以知道,不就是可以在上面画东西的布吗.好像很简单,没什么好说的.先看图: 从这几幅图我们可以看到以下几点: 1.每个小方格我们可以看 ...
- HackSeven Canvas上的动画
当自定义View的时候,可以利用Canvas给View添加一些动画效果. 下面的例子,是在屏幕上绘制一个红色的小方块,这个小方块会在屏幕上面“乱跳”. 知识点 使用到的知识点: (1) 在View的子 ...
随机推荐
- Android权限安全(1)自定义,检查,使用权限
1.自定义权限: <!-- 定义自定义权限 --> <permission android:name="com.example.f6k5i8.checkpermission ...
- Struts2应用的开发流程
Struts2的开发流程 为了能够在eclipse中使用Struts2在进行开发时,需要根据需要导入一些有关的jar包: 在官网下载相关的压缩包,这里下载了两个:struts-2.3.30-all.z ...
- web应用中web.xml配置详解
Web.xml常用元素 <web-app> <display-name></display-name>定义了WEB应用的名字 <description> ...
- Java EE 锚、表格用法
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- Metasploit中使用Nessus插件命令
基本命令 导入扫描结果 db_import /路径/文件.nessus 查看数据库里面现有的IP信息 msf > db_hosts -c address,svcs,vulns(注:vulns是 ...
- ABAP DESCRIBE语句
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- [SAP ABAP开发技术总结]将文件存储到数据库表中，并可发送邮件
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- OpenCV installation on Linux
Getting the Cutting-edge OpenCV from the Git Repository Launch Git client and clone OpenCV repositor ...
- STORM_0004_windows下zookeeper的伪集群的搭建
-----------------------------------------------------START------------------------------------------ ...
- 创建XML
//创建XML XElement xelement = new XElement("request", new XElement("head", new XEl ...