canvas简易画板
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas实现简易画板</title>
<style>
body, div {
margin: 0;
padding: 0;
text-align: center;
}
#bk {
margin: 10px auto;
width: 400px;
height: 36px;
}
.bk {
width: 20px;
height: 20px;
display: inline-block;
margin: 12px;
border: 1px dotted gray;
}
#cav {
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="bk"></div>
<canvas id="cav" width="600" height="400"></canvas>
<script>
var canvas = document.getElementById('cav');
var ctx = canvas.getContext('2d');
var $bk = document.getElementById('bk');
var bColor = ['#000000', '#999999', '#CC66FF', '#FF0000', '#FF9900', '#FFFF00', '#008000', '#00CCFF'];
var col = "#FF0000";
var fragment = document.createDocumentFragment();
var $span = null;
function initBrush() {
for(var i=0; i<bColor.length; i++) {
$span = document.createElement('span');
$span.className = 'bk';
$span.style.backgroundColor = bColor[i];
$span.onclick = function() {
col = window.getComputedStyle(this, null).getPropertyValue('background-color');
}
fragment.appendChild($span);
}
$bk.appendChild(fragment);
}
function initPainter() {
canvas.onmousedown = function(e) {
ctx.lineWidth = 2;
ctx.strokeStyle = col;
var x = e.offsetX;
var y = e.offsetY;
ctx.beginPath();
ctx.moveTo(x, y);
canvas.onmousemove = function(e) {
var nx = e.offsetX;
var ny = e.offsetY;
ctx.lineTo(x, y);
ctx.stroke();
x = nx;
y = ny;
}
document.onmouseup = function() {
canvas.onmousemove = null;
}
}
}
window.onload = function() {
initBrush();
initPainter();
}
</script>
</body>
</html>
效果展示:
知识点
Window.getComputedStyle()
:是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),只读,而element.style
能读能写。
语法如下:
var style = window.getComputedStyle("元素", "伪类");
举例如下:
var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, null);
// this is equivalent:
// var style = document.defaultView.getComputedStyle(elem1, null);
额外提示下:Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null),不过现在嘛,不是必需参数了。其中defaultView一般情况下是不需要写的,只有在FireFox3.6中才会使用。
如果我们想要获得某个具体的属性值,我们需要用到getPropertyValue
方法,实例如下:
window.getComputedStyle(document.querySelector("#testEL"),null).getPropertyValue("background-color");
//或者是用另外一种方法
window.getComputedStyle(element, null).getPropertyValue("float");
值得注意的是:使用getPropertyValue
方法不支持驼峰写法,使用-
来分割,例如:style.getPropertyValue("border-top-left-radius");
如果我们不使用getPropertyValue
方法,直接使用键值访问,其实也是可以的。但是,比如这里的的float
,如果使用键值访问,则不能直接使用getComputedStyle(element, null).float
,而应该是cssFloat
与styleFloat
,自然需要浏览器判断了,比较折腾!
另外还需注意的是在IE中的解决方法
在IE8及以下是不支持这个属性的,它自己使用currentStyle
来获取css值,不过,currentStyle
属性貌似不支持伪类样式获取,这是与getComputedStyle
方法的差异。根据上面知识我们可以写一个封装好的获取样式函数:
function getStyle(obj,attr){
if(obj.currentStyle){ //IE
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,"伪类")[attr];//Firefox
}
}
补充知识点
JS修改css样式的四种方法:
直接设置style的属性:element.style.backgroundColor = 'red'
直接设置属性:element.setAttribute('height', 100) //element.setAttribute('height', '100px')
设置cssText:element.style.cssText = 'background-color: blue;color: red;'
改变class:element.className = 'blue';element.classList.add('blue')
参考链接:
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/
canvas简易画板的更多相关文章
- canvas简易画板。
在学canvas的时候,想到可以做一个自己用来画画的简易画板,加上canvas的基础都已经学完,便尝试做了一个画板.如图 1.获取标签. var c=document.getElementById(' ...
- Kivy 中文教程 实例入门 简易画板 (Simple Paint App):3. 随机颜色及清除按钮
1. 随机颜色 通过前面的教程,咪博士已经带大家实现了画板的绘图功能.但是,现在画板只能画出黄色的图案,还十分单调,接下来咪博士就教大家,如何使用随机颜色,让画板变得五彩斑斓. 改进后的代码如下: f ...
- Kivy 中文教程 实例入门 简易画板 (Simple Paint App):2. 实现绘图功能
1. 理解 kivy 坐标系统 上一节中,咪博士带大家实现了画板程序的基础框架,以及一个基本的自定义窗口部件(widget).在上一节的末尾,咪博士留了一道关于 kivy 坐标系统的思考题给大家.通过 ...
- h5-10 canvas 简易祖玛
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas简易版捕鱼达人游戏源码
插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...
- canvas实现画板
canvas实现画板 主要用到知识点: 鼠标事件onmousedown() onmousemove() onmouseup() onmouseleave() 事件委托 canvas的一些方法 如:绘制 ...
- Kivy 中文教程 实例入门 简易画板 (Simple Paint App):1. 自定义窗口部件 (widget)
1. 框架代码 用 PyCharm 新建一个名为 SimplePaintApp 的项目,然后新建一个名为 simple_paint_app.py 的 Python 源文件, 在代码编辑器中,输入以下框 ...
- Kivy 中文教程 实例入门 简易画板 (Simple Paint App):0. 项目简介 & 成果展示
本教程咪博士将带领大家学习创建自己的窗口部件 (widget).最终,我们完成的作品是一个简易的画板程序. 当用 kivy 创建应用时,我们需要仔细思考以下 3 个问题: 我们创建的应用需要处理什么数 ...
- 一款基于HTML5 Canvas的画板涂鸦动画
今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...
随机推荐
- Appscanner实验还原code1
import _pickle as pickle from sklearn import svm, ensemble import random from sklearn.metrics import ...
- hive表链接
等值连接 不等职链接 外部链接 没有包含在聚合函数(这里是count)中的列,都需要包含在group by函数中: 正确的外链接的写法,用的是右外链接: 自链接表 把同一张表 看成了2张表
- OfficeToHtmlHelper
public class Office2HtmlHelper { /// <summary> /// Word转成Html /// </summary> /// <par ...
- Java拦截器
拦截器,主要用于拦截前端请求,常用于登录检查. 下面是演示使用拦截器拦截未登录的用户访问需要登录的模块情景,使用配置方式实现和注解方式实现代码: 配置方式: 1.web.xml中配置监听器,对于所有的 ...
- 【NLP】Recurrent Neural Network and Language Models
0. Overview What is language models? A time series prediction problem. It assigns a probility to a s ...
- 【数模】day06-数理统计I
数理统计. 以样本推断总体,进而用总体研究问题. 分两部分学习,第一部分是基础统计.参数估计.假设检验以及bootstrap方法. 1. 基础统计 假设有如下数据: 要做频数表.直方图.折线图.饼状图 ...
- CSS3选择器之属性选择器
一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...
- x = x &(x-1)
判断一个数(x)的二进制含有几个1 int func(x) { ; while(x) { countx ++; x = x&(x-); } return countx; } 假定x = 999 ...
- Bootstrap 框架
一,Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局, ...
- 【AGC013C】Ants on a Circle 弹性碰撞
题目大意 一个长度为\(lm\)的环上有\(n\)只蚂蚁,告诉你每只蚂蚁的位置和朝向,每只蚂蚁会向前爬,速度为\(1m/s\),两只蚂蚁相遇后都会掉头,问你\(t\)秒后每只蚂蚁的位置. \(n\le ...