canvas教程

Canvas canvas简易画板

字号+ 作者:H5之家 来源:H5之家 2017-11-06 15:00 我要评论( )

代码展示:!DOCTYPE htmlhtml lang=

代码展示:

<!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></div> <canvas></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"; function initBrush() { for(var i=0; i<bColor.length; i++) { var bk = document.createElement('span'); bk.classList.add('bk'); bk.style.backgroundColor = bColor[i]; bk.onclick = function() { col = window.getComputedStyle(this, null).getPropertyValue('background-color'); console.log(col); } $bk.appendChild(bk); } } 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方法的差异。根据上面知识我们可以写一个封装好的获取样式函数:

1 2 下一页

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Firefox将限制Canvas指纹

    Firefox将限制Canvas指纹

    2017-11-06 15:00

  • 万圣节动画:canvas像素点

    万圣节动画:canvas像素点

    2017-11-06 14:02

  • Canvas canvas绘制爱心的几种方法

    Canvas canvas绘制爱心的几种方法

    2017-11-06 10:02

  • Html5的Canvas雪花特效实现教程

    Html5的Canvas雪花特效实现教程

    2017-11-05 15:01

网友点评
e