一個簡單的html5畫板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Paint</title>
<script type="text/javascript" src="draw.js" language="javascript"></script>
</head>
<body>
<div>
<canvas id="myCanvas" style="border: 2px solid red; background-image:url(juren.jpg)" height="349px" width="349px"></canvas>
</div>
<select name="kind" id="k" onchange="KarlChangeColor()">
<option value="black">黑色</option>
<option value="blue">藍色</option>
<option value="red">紅色</option>
<option value="green">綠色</option>
<option value="yellow">黃色</option>
<option value="purple">紫色</option>
<option value="white">橡皮</option>
</select>
<input type="text" value="4" id="karlline" onchange="KarlChangeLineWidth()"/>
</body>
</html> 這是js文件： // JavaScript Document
var colorKarlDraw = "black";
var LineWidth = 4;
function KarlChangeLineWidth()
{
var KarlColorWidth = document.getElementById("karlline").value;
LineWidth = KarlColorWidth;
}
function KarlChangeColor()
{
var KarlColor = document.getElementById("k").value;
colorKarlDraw = KarlColor;
}
window.onload = function () {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//鼠標左鍵按下
canvas.onmousedown = function (e) {
//開始記錄路徑
ctx.beginPath();
//將光標焦點移動到鼠標點擊的位置
ctx.moveTo(e.clientX - 10, e.clientY - 10);
//設置當前繪線的粗細(默認1.0)[由于畫布的坐標和像素并不是直接對應的，所以，此屬性會有0.5像素的偏差]
ctx.lineWidth = LineWidth;
//設置繪線顏色
ctx.strokeStyle = colorKarlDraw;
// //設置漸變(會替換掉繪線顏色)
// var lingrad = ctx.createLinearGradient(0, 0, 0, 600);
// lingrad.addColorStop(0, "#00ABEB");
// lingrad.addColorStop(0.5, "#fff");
// lingrad.addColorStop(1, "#66CC00");
// ctx.strokeStyle = lingrad;
//設置繪線透明度(0.0-1.0默認1.0)
ctx.globalAlpha = 1.0;
//設置繪線端點顯示的樣子(round/butt/square)
ctx.lineCap = "round";
//設置線段拐角連接處顯示的樣子(round/bevel/miter默認)
ctx.lineJoin = "round";
//當鼠標左鍵按下時，監聽鼠標移動事件
canvas.onmousemove = function (e) {
//用線段連接點
ctx.lineTo(e.clientX - 10, e.clientY - 10);
//用筆畫描繪路徑[可以試一下fill(),看看是什么效果哦]
ctx.stroke();
}
}
//當鼠標按下后，釋放鼠標時，停止監聽鼠標移動事件
canvas.onmouseup = function (e) {
canvas.onmousemove = null;
}
//直線漸變的示例
function drawLinear() {
// Create gradients(x1,y1,x2,y2)
var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
//上色(position,color)[position value between 0.0 and 1.0]
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.5, '#fff');
lingrad.addColorStop(0.5, '#66CC00');
lingrad.addColorStop(1, 'red');
var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
lingrad2.addColorStop(0.5, '#000');
lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
// assign gradients to fill and stroke styles
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad2;
// draw shapes
ctx.fillRect(10, 10, 130, 130);
ctx.strokeRect(50, 50, 50, 50);
}
//徑向漸變的示例
function drawRadial() {
var ctx = document.getElementById('myCanvas').getContext('2d');
// Create gradients（x1,y1,r1,x2,y2,r2）
var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
radgrad2.addColorStop(0, '#FF5F98');
radgrad2.addColorStop(0.75, '#FF0188');
radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
radgrad3.addColorStop(0, '#00C9FF');
radgrad3.addColorStop(0.8, '#00B5E2');
radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
radgrad4.addColorStop(0, '#F4F201');
radgrad4.addColorStop(0.8, '#E4C700');
radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
// draw shapes
ctx.fillStyle = radgrad4;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad3;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad2;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad;
ctx.fillRect(0, 0, 150, 150);
}
//用圖案填充畫布的示例
function drawImage() {
var ctx = document.getElementById("myCanvas").getContext("2d");
var img = new Image();
img.src = "Images/1.jpg";
img.onload = function () {
var ptrn = ctx.createPattern(img, "repeat");
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, 400, 400);
}
}
//設置陰影的示例
function drawText() {
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "lime";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "black";
ctx.fillText("Sample String", 5, 30);
}
} 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！