html5构建基本画图程序

来源：互联网发布：js抽奖转盘视频教程编辑：程序博客网时间：2024/06/06 00:29

<!DOCTYPE html><html><head><title>h5构建基本的画图程序</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="" /><style type="text/css">.toolbar{    width:auto;height:140px;    text-align: center;    float:left;    margin-left: 100px;    font-family: 'Trebuchet MS';   font-size: 18px;  font-variant: small-caps;}.toolbar img {    background-size: 100%;    background-repeat: no-repeat;    width:80px;height:80px;    margin-left: 5px;    border:1px #ccc groove;}.CanvasContainer {  clear: both;  margin-left: 100px;}canvas {  border: 1px solid #7B899B;}.Toolbar{    float:right;    margin-top: -400px;    font-family: '微软雅黑';     font-size: 18px;    font-variant: small-caps;    margin-right: 50px;}img:hover {  border: 2px groove red;  background: white;}img.Selected {  border: 2px groove red;}#savedCopyContainer {  display: none;}#savedCopyContainer img:hover{    border:none;}#savedCopyContainer img {  width: 250px;  height: 150px;}</style></head><body>    <div class="toolbar">        - 请选择笔的颜色 -<br><br>        <img id="redpen" src="img/red.jpg" alt="red pen" onclick="changeColor('rgb(212,21,29)',this)">        <img id="yellowpen" src="img/yellow.jpg" alt="yellow pen" onclick="changeColor('rgb(254,251,3)',this)">        <img id="greenpen" src="img/green.jpg" alt="green pen" onclick="changeColor('rgb(0,255,0)',this)">        <img id="clearca" src="img/clear.jpg" alt="clear" onclick="changeColor('rgb(255,255,255)',this)">    </div>     <div class="toolbar">        - 请选择笔的粗细 -<br><br>        <img src="img/thickone.jpg" alt="Thin Pen" onclick="changeThickness(2, this)">        <img src="img/thicktwo.jpg" alt="Medium Pen" onclick="changeThickness(7, this)">         <img src="img/thickthree.jpg" alt="Thick Pen" onclick="changeThickness(12, this)">     </div>    <div class="CanvasContainer">        <canvas id="drawingCanvas" width="740" height="300"></canvas>    </div>    <div class="Toolbar">        - 选项 -<br>        <button onclick="saveCanvas()">保存当前绘图</button>        <button onclick="clearCanvas()">清除当前绘图</button>        <div id="savedCopyContainer">          <img id="savedImageCopy"><br>          绘图正在保存中 ...        </div>    </div></body><script type="text/javascript">var canvas;var context;window.onload = function() {  canvas = document.getElementById("drawingCanvas"); //取得canvas和绘图上下文  context = canvas.getContext("2d");  canvas.onmousedown = startDrawing;  canvas.onmouseup = stopDrawing;  canvas.onmouseout = stopDrawing;  //添加用于实现实现绘图操作的事件处理程序  canvas.onmousemove = draw;};    var previousColorElement; //记录此前为选择颜色而被单击过得《img》元素    function changeColor(color,imgElement){ //重新设置当前画笔的颜色        context.strokeStyle = color;        imgElement.className = "Selected";        if(previousColorElement !=null)//恢复上一次被单击的《img》元素            previousColorElement.className = "";        previousColorElement = imgElement;    }    var previousThicknessElement//记录此前为选择粗细而被单击过得《img》元素    function changeThickness(thickness,imgElement){//重新设置当前画笔的颜色        context.lineWidth = thickness;        imgElement.className = "Selected";        if(previousThicknessElement !=null)//恢复上一次被单击的《img》元素            previousThicknessElement.className = "";        previousThicknessElement = imgElement;    }    var isDrawing = false;//将该变量设置为false，为创建新路径做准备    function startDrawing(e){//开始绘图，创建新的路径        isDrawing = true;        context.beginPath();        context.moveTo(e.pageX - canvas.offsetLeft,e.pageY - canvas.offsetTop);        //把鼠标放在当前位置上，记录鼠标当前的坐标    }    function draw(e){//记录鼠标的新位置        if(isDrawing ==true){            var x = e.pageX - canvas.offsetLeft;//记录鼠标新的坐标位置            var y = e.pageY - canvas.offsetTop;            context.lineTo(x,y);//画一条新线            context.stroke();        }    }    function stopDrawing(){        isDrawing = false;    }    function clearCanvas(){//清除画布内容        context.clearRect(0,0,canvas.width,canvas.height);    }    function saveCanvas() { //保存画布内容        var imageCopy = document.getElementById("savedImageCopy");        imageCopy.src = canvas.toDataURL("img/jpeg"); // 设置其保存的位置        var imageContainer = document.getElementById("savedCopyContainer");        imageContainer.style.display = "block";//将图像显示出来    }</script></html>

写完代码，看看效果如何：
这里写图片描述

这里写图片描述

在绘图之前是这样的，画完之后便是这样的：
这里写图片描述

这里写图片描述

好了就是这样的，好像有画的有点丑的样子。

最后用到的知识点基本都是canvas最基础的绘图方法极其属性。

moveTo（）：找到直线的起点，一般以左上角为（0,0）
lineTo（）：用于在起点与重点之间建立联系。
stroke（）：用于把直线实际的绘制出来。
lineWidth：用于设置线条的粗细，该代码便是利用传参，改变线条的粗细。
strokeStyle：用来设置线条的颜色，本代码也是通过传参数，来改变线条的颜色，它可以使用html颜色编码，以及rgb（）函数。
lineCap：可以设置线条两端的形状，默认是butt（方头），还有round（圆头），square（长方形头）。
closePath（）：给封闭的图形填充颜色。
fillStyle：想要填充的颜色。
fill（）：用于实际的把填充色画出来。
fillRect（）：用来直接绘制矩形，设置其宽高即可，用fillStyle取颜色，如：fillRect（0,10,100,200）
strokeRect（）：也可以用来绘制矩形，宽度取自lineWidth，如：strokeRect（0,10,100,200）。

2 0