一、WPF下如何在canvas里显示文字信息啊、、、谢谢了
往canvas里面加个textblock就行了撒
二、html5 canvas怎么画两个矩形
var canvas=document.getElementById('canvas');
var ctx =getContext('2d');
ctx.beginPath();
ctx.lineWidth=1;
ctx.strokeStyle=#000;
ctx.rect(0,0,10,20);
ctx.stroke();
ctx.closePath();
//用closepath结束绘画，否则可能出现黏连；
ctx.beginPath();
ctx.lineWidth=1;
ctx.strokeStyle=#f00;
ctx.rect(50,0,10,20);
ctx.stroke();
ctx.closePath();
三、html5在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>
转载请注明：亿家范文网 » WPF下如何在canvas里显示文字信息啊、、、谢谢了