<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="background: rgba(199,237,204,1)">
<div style="display:flex; flex-direction: row">
<!--通过style方式为canvas设置宽高在火狐浏览器上导致绘制内容纵向拉伸。。。-->
<canvas id="drawing" width="400px" height="400px">canvas to draw</canvas>
<pre id="container" style="margin: 10px"/>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494089659713&di=2de3a402d0a89cd3e5ea785e30150928&imgtype=0&src=http://sh.sinaimg.cn/2014/0715/U3551P18DT20140715192106.jpg">
</div>
</body>
<script type="text/javascript">
window.οnlοad=function () {
var drawing = document.getElementById('drawing');
if (drawing.getContext) {
print('support')
addRoundRectFunc();
var context = drawing.getContext('2d');
draw(context);
} else {
print('not ')
}
}
function draw(context) {
context.fillStyle = 'red';
var image = document.images[0];
context.roundRect(0,0,image.width/2,image.height/2,30,true)
context.globalCompositeOperation='source-in';
context.drawImage(image, 0, 0, image.width / 2, image.height / 2)
// toImage();
}
function addRoundRectFunc() {
CanvasRenderingContext2D.prototype.roundRect =
function (x, y, width, height, radius, fill, stroke) {
if (typeof stroke == "undefined") {
stroke = true;
}
if (typeof radius === "undefined") {
radius = 5;
}
this.beginPath();
this.moveTo(x + radius, y);
this.lineTo(x + width - radius, y);
this.quadraticCurveTo(x + width, y, x + width, y + radius);
this.lineTo(x + width, y + height - radius);
this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
this.lineTo(x + radius, y + height);
this.quadraticCurveTo(x, y + height, x, y + height - radius);
this.lineTo(x, y + radius);
this.quadraticCurveTo(x, y, x + radius, y);
this.closePath();
if (stroke) {
this.stroke();
}
if (fill) {
this.fill();
}
};
}
function toImage() {
var imageUri = drawing.toDataURL('image/png');
var imageTag = document.createElement('img');
imageTag.style = 'margin:10px;width:200px;height:200px'
imageTag.src = imageUri;
document.body.appendChild(imageTag)
}
function print(txt) {
document.getElementById("container").innerHTML += ('\n') + txt;
}
document.body.onclick = function () {
window.location.reload()
}
console.log = print;
</script>
</html>
