html5的Canvas技术实现简易绘画板

例说说用html5的Canvas技术实现简易绘画板

以往也用canvas划过绘画布局，今次在原来的基础上加上一些能选择的功能，比如笔头的大小、绘画的形状、绘画的线条、清除按钮等！

功能还不是很完善，如有不恰当或有问题之处，欢迎给予斧正，感谢支持！

下面看看效果图：

实现代码

html结构：

css样式：

javascript代码：

TML5中的一个新增元素——元素以及伴随这个元素而来的一套编程接口——canvas API。使用canvas API可以在页面上绘制出任何你想要的、非常漂亮的图形与图像，创造出更加丰富多彩、赏心悦目的Web页面。

canvas的概念最初是由苹果公司提出的，用于在Mac OS X WebKit中创建控制板部件（Dashboard Widget）。在canvas出现之前，开发人员若要在浏览器中使用绘图API，只能使用Adobe的Flash和SVG（可伸缩矢量图形）插件，或者只有IE才支持的VML（矢量标记语言），以及JavaScript中的一些技术。假设我们要在没有canvas元素的条件下绘制一条对角线，此时如果没有一套二维绘图API的话，这会是一项相当复杂的工作。HTML5中的canvas就能够提供这样的功能，对浏览器端来说这个功能非常有用，因此canvas被纳入了HTML5规范。

在canvas元素里进行绘画，并不是指拿鼠标来作画。在网页上使用canvas元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为300像素，高为150像素，用户可以自定义具体的大小或者设置canvas元素的其他特性。在页面中加入了canvas元素后，我们便可以通过JavaScript来自由地控制它。可以在其中添加图片、线条以及文字，也可以在里面绘图，甚至还可以加入高级动画。

【前端开发】最新前端入门教程，html css基础教程+移动端前端视频教程。_哔哩哔哩_bilibili

篇文章给大家带来的内容是关于Canvas绘制出时钟的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

完整代码：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

div {

text-align: center;

margin-top: 250px;

}

</style>

</head>

<body>

<div>

<canvas id="clock" height="200px" width="200px">你的浏览器不支持canvas</canvas>

</div>

var dom=document.getElementById('clock');

var ctx=dom.getContext('2d');

var width=ctx.canvas.width;

var height=ctx.canvas.height;

var r=width / 2;

//绘制表盘

function drawBackground() {

ctx.save();

ctx.translate(r, r);

ctx.beginPath();

ctx.lineWidth=10;

ctx.arc(0, 0, r - 5, 0, 2 * Math.PI, false);

ctx.stroke();

var hourNumbers=[3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];

ctx.font='18px Arial';

ctx.textAlign='center';

ctx.textBaseline='middle';

//小时数字

hourNumbers.forEach(function (number, i) {

var rad=2 * Math.PI / 12 * i;

var x=Math.cos(rad) * (r - 30);

var y=Math.sin(rad) * (r - 30);

ctx.fillText(number, x, y);

// console.log(x)

})

//绘制分刻度

for (var i=0; i < 60; i++) {

var rad=2 * Math.PI / 60 * i;

var x=Math.cos(rad) * (r - 18);

var y=Math.sin(rad) * (r - 18);

ctx.beginPath();

if (i % 5==0) {

ctx.fillStyle='#000';

ctx.arc(x, y, 2, 0, 2 * Math.PI, false);

} else {

ctx.fillStyle='#ccc';

ctx.arc(x, y, 2, 0, 2 * Math.PI, false);

}

ctx.fill();

}

//绘制时针

function drawHour(hour, minute) {

ctx.save();

ctx.beginPath();

var rad=2 * Math.PI / 12 * hour;

var mrad=2 * Math.PI / 12 / 60 * minute;

ctx.rotate(rad + mrad);

ctx.lineWidth=6;

ctx.lineCap='round';

ctx.moveTo(0, 10);

ctx.lineTo(0, -r / 2);

ctx.stroke();

ctx.restore();

}

//绘制分针

function drawMinute(minute) {

ctx.save();

ctx.beginPath();

var rad=2 * Math.PI / 60 * minute;

ctx.rotate(rad);

ctx.lineWidth=3;

ctx.lineCap='round';

ctx.moveTo(0, 10);

ctx.lineTo(0, -r + 30);

ctx.stroke();

ctx.restore();

}

//绘制秒针

function drawSecond(second) {

ctx.save();

ctx.beginPath();

ctx.fillStyle='red'

var rad=2 * Math.PI / 60 * second;

ctx.rotate(rad);

ctx.moveTo(-2, 20);

ctx.lineTo(2, 20);

ctx.lineTo(1, -r + 18);

ctx.lineTo(-1, -r + 18);

ctx.fill();

ctx.restore();

}

//绘制指针的端点

function drawDot() {

ctx.beginPath();

ctx.fillStyle='white';

ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);

ctx.fill();

}

//动起来

function draw() {

//清除之前所绘制的

ctx.clearRect(0, 0, width, height);

var now=new Date();

var hour=now.getHours();

var minute=now.getMinutes();

var second=now.getSeconds();

drawBackground();

drawHour(hour, minute);

drawMinute(minute);

drawSecond(second)

drawDot();

ctx.restore();

}

//draw();

setInterval(draw, 1000);

</script>

</body>

</html>

以上就是Canvas绘制出时钟的代码示例的详细内容，更多请关注其它相关文章！

更多技巧请《转发 + 关注》哦！

在线咨询

上一篇：CSS作图（二），纯CSS代码画出精致逼真的图像，学
下一篇：用sendRedirect跳转

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html5的Canvas技术实现简易绘画板

您的项目需求