使用canvas制作绘图板

模仿了windows绘图板，用canvas做了一个绘图板，可以调整线条颜色，粗细，清除画布等功能

先看看实际效果图

以下为代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvas</title><style type="text/css">#canvas {border: 1px solid black;}#choose{width: 300px;}</style>
</head><body><div id="choose"><input type="color" id="color"><select name="" id="lineWidth"><option value="5">--请选择线条粗细(像素)--</option><option value="2">2px</option><option value="5">5px</option><option value="8">8px</option><option value="12">12px</option><option value="15">15px</option></select><input type="button" id="btnClear" value="清除画布"></div><canvas id="canvas" width="500" height="500"></canvas>
</body>
<script type="text/javascript">//获取画布let canvas = document.getElementById("canvas"); //获取canvas元素let context = canvas.getContext("2d"); //获取绘图上下文context//获取其他元素let color = document.getElementById("color");let lineWidth = document.getElementById("lineWidth");let btn = document.getElementById("btnClear");//判断是否开始绘图let isDraw = false;//绘图//鼠标摁下时开始绘图canvas.onmousedown = function (){isDraw = true;//颜色context.strokeStyle = color.value;//线宽context.lineWidth = lineWidth.value;//开始绘制context.beginPath();//指定绘制起点context.moveTo(event.offsetX,event.offsetY);}//鼠标移动进行绘图canvas.onmousemove = function (){if(isDraw){//指定绘制终点context.lineTo(event.offsetX,event.offsetY);//描边context.stroke();}}//鼠标松开停止绘图canvas.onmouseup = function (){isDraw = false;}//当鼠标移出画布时，停止绘图canvas.onmouseout = function(){isDraw  = false;}//清除画布btn.onclick = function(){context.clearRect(0,0,canvas.width,canvas.height);}</script></html>

注：canvas的宽高直接在canvas标签中写即可，不要在css中去指定宽高！

使用canvas制作绘图板相关推荐

html根据字段制作曲线图,canvas制作简单的HTML图表，折线或者矩形统计(原创)
插件描述:canvas制作简单的HTML图表,折线或者矩形统计使用canvas制作简单的HTML图表,折线或者矩形统计. 使用canvas制作简单的HTML图表,折线或者矩形统计,简单而实用.图形由 ...
[译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
html制作动态坐标轴,HTML5 canvas制作动态随机星图
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 本篇将会介绍如何用canvas制作动态随机移动的星图啦啦啦小白在远离小白道路上的第一步就是搭个博客前言这次的博文不 ...
Canvas制作的下雨动画
简介在codepen上看到一个Canvas做的下雨效果动画,感觉蛮有意思的.就研究了下,这里来分享下,实现技巧.效果可以见下面的链接. 霓虹雨: http://codepen.io/natewile ...
[html] 使用canvas制作一个印章
[html] 使用canvas制作一个印章 <!DOCTYPE html> <html lang="en"> <head><meta ch ...
html制作状态栏数字时钟,html5 canvas制作15种数字时钟样式代码
特效描述:html5 canvas制作数字时钟样式.html5 canvas数字时钟代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 clockd1_={ "indic ...
飞机大战HTML5游戏源码，基于Canvas制作的网页版飞机大战游戏+飞机大战手机端
简介: 飞机大战HTML5游戏源码是一款基于Canvas制作的网页版飞机大战游戏,画质精美的飞机大战手机端游戏源码网盘下载地址: http://kekewangLuo.net/W1S2LQcqAT2 ...
php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
html5在线制作教程,HTML5 Canvas 制作动画
HTML5 Canvas 制作动画在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果. 在线示例要在HTML5画布上绘制 ...

使用canvas制作绘图板

使用canvas制作绘图板

使用canvas制作绘图板相关推荐

最新文章

热门文章