【DOM编程艺术】Canvas画图

最新推荐文章于 2023-05-23 20:32:50 发布

weixin_33910460

最新推荐文章于 2023-05-23 20:32:50 发布

阅读量138

点赞数

原文链接：http://www.cnblogs.com/positive/p/3685891.html

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
</head>

<body>
<canvas id='draw-in-me' width='120' height="40">
    <p>Powered By HTML5 canvas</p>
</canvas>
<script>
window.onload=draw;
function draw(){
    var canvas = document.getElementById('draw-in-me');
    var ctx=canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(120.0,32.0);
    ctx.bezierCurveTo(120.0,36.4,116.4,40.0,112.0,40.0);
    ctx.lineTo(8.0,40.0);
    ctx.bezierCurveTo(3.6,40.0,0.0,36.4,0.0,32.0);
    ctx.lineTo(0.0,8.0);
    ctx.bezierCurveTo(0.0,3.6,3.6,0.0,8.0,0.0);
    ctx.lineTo(112.0,0.0);
    ctx.bezierCurveTo(116.4,0.0,120.0,3.6,120.0,8.0);
    ctx.lineTo(120.0,32.0);
    ctx.closePath();
    ctx.fill();
    ctx.lineWidth = 2.0;
    ctx.strokesStyle = "rgb(255,255,255)";
    ctx.stroke();
}
</script>
</body>
</html>

变量ctx引用的是画布的绘图空间(context).所谓绘图空间，在这里就是一个平面二维的绘图表面，其原点（0.0）位于<canvas>的左上角。

在这个绘图表面的坐标系里，越往右x的值越大，越往下y的值越大。通过在绘图空间中指定坐标点，可以绘制出各种二维的形状和线条。在绘制线条时，还可以添加不同的填充及描边样式。

<canvas>不仅仅能够用来绘制矢量路径；还可以通过它来显示和操作位图图像。

转载于:https://www.cnblogs.com/positive/p/3685891.html

weixin_33910460

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【DOM编程艺术】Canvas画图

<!doctype html><html><head><meta charset="utf-8"><title>Canvas</title></head><body><canvas id='draw-in-me' width='120' height="40"&...
复制链接

扫一扫