您的位置：首页 > Web前端 > JavaScript

JavaScript-Html-绘图-canvas基础

2017-05-20 17:02 411 查看

使用Html控件canvas，利用JavaScript自定义绘图

效果图如下：

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300" height="350" style="border:4px solid #000;"/>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

// 1.画线段
context.beginPath();
context.moveTo(10,10);
context.lineTo(280,10);
context.lineWidth = 8;
context.strokeStyle = "#00f";
context.stroke();
context.closePath();

// 2.画圆框
context.beginPath();
context.arc(60,80,50,0,360,false);
context.lineWidth = 4;
context.strokeStyle = "#f00";
context.stroke();
context.closePath();
// 画实心圆
context.beginPath();
context.arc(60,180,50,0,360,false);
context.fillStyle = "#00f";
context.fill();
context.closePath();

// 3.画矩形框
context.beginPath();
context.strokeRect(150,40,100,50);
context.closePath();
// 画实心矩形
context.beginPath();
context.fillRect(150,90,100,50);
context.closePath();

// 4.添加图片
context.beginPath();
var image = new Image();
image.src = "http://avatar.csdn.net/5/3/C/1_qq_32115439.jpg";
context.drawImage(image,150,160,100,100);
context.closePath();

// 5.添加文字
context.beginPath();
context.font = "60px 宋体";
context.fillText("lioil.win",10,320,280);
context.closePath();
</script>
</body>
</html>

简书: http://www.jianshu.com/p/9e495ea9aea6

CSDN博客: http://blog.csdn.net/qq_32115439/article/details/72582063

GitHub博客：http://lioil.win/2017/05/20/JS_Html_Canvas.html

Coding博客：http://c.lioil.win/2017/05/20/JS_Html_Canvas.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航