增加了删除方法，并简单优化了添加和删除，每次执行完都会刷新页面显示最新操作的数据：

//删除数据   
function del(name) {
  localStorage.removeItem(name);
  alert("删除成功!");
  loadAll();
}

尝试一下 »

Canvas 转为图片

我们可以使用 Canvas2image 库将 canvas 转换为图片。

本地下载：/assets/canvas2image/canvas2image.js。

Github 地址：https://github.com/hongru/canvas2image

使用方式如下：

Canvas2Image.saveAsImage(canvasObj, width, height, type)
Canvas2Image.saveAsPNG(canvasObj, width, height)
Canvas2Image.saveAsJPEG(canvasObj, width, height)
Canvas2Image.saveAsGIF(canvasObj, width, height)
Canvas2Image.saveAsBMP(canvasObj, width, height)
Canvas2Image.convertToImage(canvasObj, width, height, type)
Canvas2Image.convertToPNG(canvasObj, width, height)
Canvas2Image.convertToJPEG(canvasObj, width, height)
Canvas2Image.convertToGIF(canvasObj, width, height)
Canvas2Image.convertToBMP(canvasObj, width, height)

测试实例：

var canvas, ctx, bMouseIsDown = false, iLastX, iLastY,
$save, $imgs,
$convert, $imgW, $imgH,
$sel;
function init () {
canvas = document.getElementById('cvs');
ctx = canvas.getContext('2d');
$save = document.getElementById('save');
$convert = document.getElementById('convert');
$sel = document.getElementById('sel');
$imgs = document.getElementById('imgs');
$imgW = document.getElementById('imgW');
$imgH = document.getElementById('imgH');
bind();
draw();
}
function bind () {
canvas.onmousedown = function(e) {
bMouseIsDown = true;
iLastX = e.clientX - canvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
iLastY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
}
canvas.onmouseup = function() {
bMouseIsDown = false;
iLastX = -1;
iLastY = -1;
}
canvas.onmousemove = function(e) {
if (bMouseIsDown) {
var iX = e.clientX - canvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
var iY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
ctx.moveTo(iLastX, iLastY);
ctx.lineTo(iX, iY);
ctx.stroke();
iLastX = iX;
iLastY = iY;
}
};
$save.onclick = function (e) {
var type = $sel.value,
w = $imgW.value,
h = $imgH.value;
Canvas2Image.saveAsImage(canvas, w, h, type);
}
$convert.onclick = function (e) {
var type = $sel.value,
w = $imgW.value,
h = $imgH.value;
$imgs.appendChild(Canvas2Image.convertToImage(canvas, w, h, type))
}
}
function draw () {
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, 600, 400);
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 50, 50);
}

尝试一下 »

创建渐变时 context.addColorStop(stop, color) 括号内参数含义如下：

• stop: 介于0.0与1.0之间的值，表示渐变中开始于结束之间的位置
• color: 在stop位置显示的CSS颜色值

在绘制渐变时，可以通过多个 addColorStop() 方法来定义渐变；否则渐变将不可见。

参考了一楼的笔记，可以做出上半圆。左半圆和有半圆也是同理的。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,-1*Math.PI,Math.PI);
ctx.stroke();

尝试一下 »

关于画布的滚动条实现代码：

window.onload = function(){
  var can = document.getElementById('myCanvas');
  var pro = can.innerHTML.substring(0,can.innerHTML.length-1);
  console.log(pro);
  var cxt = can.getContext('2d'); 
}

尝试一下 »