<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>
方案一：使用文本框链接：在原来的文本的位置,做并列的两个文本框A和B，依(1)或(2)建立文本框链接
（1）点击文本框A正中下方的按钮，指向B
（2）选中A,B，调用菜单"文本-文本框链接"。
再将文本移动(有很多方法如i-ii-iii)到A中，溢出的会自动流向B，调节一下。
i:剪切与粘贴；ii:链接到A,再删除原来的文本框；iii:右键拖放到A,再选移动
方案二：使用分栏：
ctrl_T，(coreldraw 9)或 菜单"文字-...-栏"，将栏数设为2，合理调节栏间距。
分栏后，可以在刚才出现的对话框中调整；也可以双击文本框，标尺上出现文本标尺，也可以调节。（分栏也可以在文本标尺上调节）
外一则：
有时还可以画一个无色矩形，放到文本上，设置文绕图，达到特别的目的。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）