第50篇铅笔选择三种粗细（四）之样式及用按钮实现

来源：互联网发布：飞鸽翻墙软件7.59 编辑：程序博客网时间：2024/04/28 04:06

关键词：铅笔选择三种粗细之样式,铅笔选择三种粗细用按钮实现

一、铅笔选择三种粗细（四）之样式

1 现在样式如下：

需要做的几点如下：

a.使其只针对铅笔

b.改成图片

c.只能选三个值

2. 改成图片

修改代码如下：

修改之后效果如下：

现在变成这个样子了，如下：

相关代码如下：

function decoratePencil() {//铅笔

varcontext = getContext("pencil-icon"),

image= new Image;

image.onload = function() {

context.drawImage(image, 0, 0,40, 40)

image.src = "/static/img/pencil.png";

bindEvent(context,"Pencil");

varlineWidthContainer = find('line-width-container'),

lineWidthText = find('line-width-text'),

btnLineWidthDone = find('line-width-done'),

h1= document.getElementsByTagName('h1')[0],

canvas = context.canvas;

addEvent(canvas, 'click', function() {

hideContainers();

lineWidthContainer.style.display = 'block';

lineWidthContainer.style.top = (canvas.offsetTop + 1) + 'px';

lineWidthContainer.style.left = (canvas.offsetLeft + canvas.clientWidth)+ 'px';

lineWidthText.focus();

});

addEvent(btnLineWidthDone,'click', function() {

lineWidthContainer.style.display = 'none';

lineWidth = lineWidthText.value;

});

}

3. 现在功能实现了，我改成了三个按钮，相关代码如下：

</section>

function decoratePencil() {//铅笔

varcontext = getContext("pencil-icon"),

image= new Image;

image.onload = function() {

context.drawImage(image, 0, 0,40, 40)

image.src = "/static/img/pencil.png";

bindEvent(context,"Pencil");

var lineWidthContainer = find('line-width-container'),

btnLineWidthDone =find('line-width-done'),

btnLineWidthDone2 = find('line-width-done2'),

btnLineWidthDone3 =find('line-width-done3'),

h1 =document.getElementsByTagName('h1')[0],

canvas = context.canvas;

addEvent(canvas, 'click', function() {

hideContainers();

lineWidthContainer.style.display = 'block';

lineWidthContainer.style.top = (canvas.offsetTop + 1) + 'px';

lineWidthContainer.style.left = (canvas.offsetLeft + canvas.clientWidth)+ 'px';

});

addEvent(btnLineWidthDone, 'click', function() {

lineWidthContainer.style.display = 'none';

lineWidth = 2;

});

addEvent(btnLineWidthDone2, 'click', function() {

lineWidthContainer.style.display = 'none';

lineWidth = 8;

});

addEvent(btnLineWidthDone3, 'click', function() {

lineWidthContainer.style.display = 'none';

lineWidth = 16;

});

}

效果如下：

接下来要做两件事，把按钮改成图片，并把其它的比方说直线，箭头之类的，宽度设为定值。

2017年1月2日星期一

1 0