html5在canvas绘制标尺
作者&投稿：兆克 （若有异议请与网页底部的电邮联系）
不光绘制图片，在高分屏下，绘制文字和线条都会出现模糊的现象，GitHub上有一个hidpi-canvas-polyfill可以很好的解决这个问题，但是没有对图片进行处理。如果你了解了原因，解决这个问题也很容易。
首先，引入上方这个polyfill;
然后，得到devicePixelRatio和backingStorePixelRatio的比例，可以使用下面的方法
var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
//调用
var ratio = getPixelRatio(ctx);
之后，在调用ctx.drawImage()的时候，给width和height乘以ratio，如下：
1
ctx.drawImage(document.querySelector('img'), 10, 10, 300 * ratio, 90 * ratio);
Canvas绘制效率不低
Canvas没有dom操作，只是简单的2D绘制，所以效率不低，Chrome浏览器下，每秒可绘制五万个基本图形元素（圆形，矩形或者线条），如果有阴影效果会慢很多，总的来说上万元素的绘制还是很轻松的。
适合简单应用
因为简单，做一些像素处理，2D绘制，小游戏啥的还是很方便的，国际上有javascript1k作品大赛，用1024字节的js代码，实现丰富的效果，基本上都用到canvas，所以在轻量小巧方面很有优势。
<!doctype html>
<html>
<head>
<style>
body {
background: #eeeeee;
}
#canvas {
background: #ffffff;
cursor: pointer;
margin-left: 10px;
margin-top: 10px;
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<canvas id='canvas' width='600' height='400'>
Canvas not supported
</canvas>
<script>
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
AXIS_MARGIN = 40,
AXIS_ORIGIN = { x: AXIS_MARGIN, y: canvas.height-AXIS_MARGIN },
AXIS_TOP = AXIS_MARGIN,
AXIS_RIGHT = canvas.width-AXIS_MARGIN,
HORIZONTAL_TICK_SPACING = 10,
VERTICAL_TICK_SPACING = 10,
AXIS_WIDTH = AXIS_RIGHT - AXIS_ORIGIN.x,
AXIS_HEIGHT = AXIS_ORIGIN.y - AXIS_TOP,
NUM_VERTICAL_TICKS = AXIS_HEIGHT / VERTICAL_TICK_SPACING,
NUM_HORIZONTAL_TICKS = AXIS_WIDTH / HORIZONTAL_TICK_SPACING,
TICK_WIDTH = 10,
TICKS_LINEWIDTH = 0.5,
TICKS_COLOR = 'navy',
AXIS_LINEWIDTH = 1.0,
AXIS_COLOR = 'blue';
// Functions..........................................................
function drawGrid(color, stepx, stepy) {
context.save()
context.fillStyle = 'white';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
context.lineWidth = 0.5;
context.strokeStyle = color;
for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
context.beginPath();
context.moveTo(i, 0);
context.lineTo(i, context.canvas.height);
context.stroke();
}
for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
context.beginPath();
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
context.stroke();
}
context.restore();
}
function drawAxes() {
context.save();
context.strokeStyle = AXIS_COLOR;
context.lineWidth = AXIS_LINEWIDTH;
drawHorizontalAxis();
drawVerticalAxis();
context.lineWidth = 0.5;
context.lineWidth = TICKS_LINEWIDTH;
context.strokeStyle = TICKS_COLOR;
drawVerticalAxisTicks();
drawHorizontalAxisTicks();
context.restore();
}
function drawHorizontalAxis() {
context.beginPath();
context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
context.lineTo(AXIS_RIGHT, AXIS_ORIGIN.y)
context.stroke();
}
function drawVerticalAxis() {
context.beginPath();
context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
context.lineTo(AXIS_ORIGIN.x, AXIS_TOP);
context.stroke();
}
function drawVerticalAxisTicks() {
var deltaY;
for (var i=1; i < NUM_VERTICAL_TICKS; ++i) {
context.beginPath();
if (i % 5 === 0) deltaX = TICK_WIDTH;
else deltaX = TICK_WIDTH/2;
context.moveTo(AXIS_ORIGIN.x - deltaX,
AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
context.lineTo(AXIS_ORIGIN.x + deltaX,
AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
context.stroke();
}
}
function drawHorizontalAxisTicks() {
var deltaY;
for (var i=1; i < NUM_HORIZONTAL_TICKS; ++i) {
context.beginPath();
if (i % 5 === 0) deltaY = TICK_WIDTH;
else deltaY = TICK_WIDTH/2;
context.moveTo(AXIS_ORIGIN.x + i * HORIZONTAL_TICK_SPACING,
AXIS_ORIGIN.y - deltaY);
context.lineTo(AXIS_ORIGIN.x + i * HORIZONTAL_TICK_SPACING,
AXIS_ORIGIN.y + deltaY);
context.stroke();
}
}
// Initialization................................................
drawGrid('lightgray', 10, 10);
drawAxes();
</script>
</body>
</html>
秦功头孢： <!doctype html><html> <head> <style> body { background: #eeeeee; } #canvas { background: #ffffff; cursor: pointer; margin-left: 10px; margin-top: 10px; -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5); -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5)...
青冈县17810492921： 如何使用html5中的canvas标签,画一个圆及一个矩形 - ？
秦功头孢： Cavas的英文解释是画布,使用这个Html5的Canvas标签可以创建画布,结合JavaScript可以画出很多图形,我们先以画一个蓝色矩形为例,说明一下这个标签的使用方法, 首先需要建立一个HTML5的网页,方法是: 进入DW后,选择:文件-->...
青冈县17810492921： 怎样使用canvas绘制一个矩形 - ？
秦功头孢： 1、首先需要新建文件并创建画布.2、接下来开始定义函数获取画布.3、然后可以获取上下文.、4、接着需要设置填充矩形的颜色.5、接下来开始设置边框颜色和边框宽度.6、最后开始绘制填充矩形和边框矩形.7、最后输出完成图,可以看到绘制一个矩形.
青冈县17810492921： html5的绘图会闪烁,怎么解决 - ？
秦功头孢： 创建一个新的canvas对象,用这个canvas绘制你的小球,这个canvas当作缓存用的canvas.然后再用你的canvas绘制这个canvas,而不是直接绘制图片,这样效率很高.这种技术叫做双缓存.
青冈县17810492921： 在canvas中画图,坐标怎么懂 - ？
秦功头孢： 画布是一个矩形区域,您可以控制其每一像素.canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法.创建 Canvas 元素 向 HTML5 页面添加 canvas 元素.规定元素的 id、宽度和高度:<canvas id=＂myCanvas＂ width=＂200＂ ...
青冈县17810492921： 如何在UWP用C#实现HTML5中canvas各种画图操作 - ？
秦功头孢： 画布 用canvas作画,首先,你需要有一块“画布”.如果你的书架里面没有画布,你可以买一卷回来放进去.当然,在网页里面我们不需要花钱买,直接写一个canvas即可,类似: 复制代码 代码如下:<canvas id=＂cvs＂ width=＂800＂ ...
青冈县17810492921： 如何使用HTML5 Canvas动态的绘制拓扑图 - ？
秦功头孢： 使用HTML5 Canvas动态的绘制拓扑图:HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) .drawImage函数有三种函数原型:语法:drawImage(image, dx, dy) drawImage(image, dx, dy, ...
青冈县17810492921： Html5中Canvas画布:我设置画布大小为:100*100px,但是用浏览器预览时却变成了304*154px了,求指导? - ？
秦功头孢： 亲: 给canvas设置长宽,要这样写:<canvas width=＂100＂ height=＂100＂></canvas> 把#nh{width:100;height:100;}这两个css设置去掉吧 温馨提示: 1.还有一点就是,设置css时,长宽需要给个单位,如:#nh{width:100px; height:100px;} 2.js语句,后头加上分号,养成好习惯
青冈县17810492921： 怎样用canvas在网页上绘制图形 - ？
秦功头孢： 我们可以获取canvas对象为var c=document.getElementById(＂myCanvas＂);其应有js属性方法如下列举: 1:绘制渲染对象,c.getContext(＂2d＂),获取2d绘图对象,无论我们调用多少次获取的对象都将是相同的对象. 2:绘制方法:clecrRect...
青冈县17810492921： 怎么在网页中创建canvas和文字? - ？
秦功头孢： 如果你想在网页当中使用canvas写文字的效果,那你需要好好的找到html5中canvas那段再看一遍,具体需要什么效果,还看自己想要什么效果,就用到canvas的哪个功能. 以下代码来自百度,你随便复制预览效果: <!DOCTYPE html><html...
